221

I am just curious as to why the <center> tag in HTML was deprecated.

The <center> was a simple way of quickly center-aligning blocks of text and images by encapsulating the container in a <center> tag, and I really cannot find any simpler way on how to do it now.

Anyone know of any simple way on how to center "stuff" (not the margin-left:auto; margin-right:auto; and width thing), something that replaces <center> ? And also, why was it deprecated?

0

13 Answers 13

252

The <center> element was deprecated because it defines the presentation of its contents — it does not describe its contents.

One method of centering is to set the margin-left and margin-right properties of the element to auto, and then set the parent element’s text-align property to center. This guarantees that the element will be centered in all modern browsers.

17
  • 8
    Yes, CSS is all about spliting presentation and data. Nov 25, 2009 at 18:10
  • 3
    Ivan, CSS is all about presentation; it is not about splitting - as the inline style attributes in some answers here demonstrate! It is of course a very good idea to use sensible classes and not inline CSS, but that is a distinct concept to using CSS for presentation. Nov 25, 2009 at 18:45
  • 17
    I've had some cases (which I can't recall atm) where setting both the margin and text-align did not center my element in IE, but wrapping it with <center> did work... I'll try to find an example.
    – Mottie
    Nov 25, 2009 at 19:39
  • 13
    the auto margin trick only works for block level elements. use display: block; on an inline element. Dec 14, 2009 at 15:21
  • 93
    I'm sure the seventeen nested divs on a typical WP or Drupal template really help to separate out the presentation details :P </troll> ( <- look, semantic tag!)
    – detly
    Dec 14, 2010 at 15:22
32

The Least Popular Answer

  1. A deprecated tag is not necessarily a bad tag;
  2. There are tags that deal with presentation logic, center is one of them;
  3. A center tag is not the same as a div with text-align:center;
  4. The fact that you have another way to do something doesn't make it invalid.

Let me explain because there are notorious downvoters here who will think I'm defending oldschool HTML4 or something. No I'm not. But the debate around center is simply a trend war, there is no real reason to ditch a tag that serves a valid purpose well.

So let's see the major arguments against it.

  • "It describes presentation, not semantics!"
    No. It describes a logical arrangement - and yes, it has a default appearance, just as other tags like <p> or <ul> do. But the point is the enclosed part's relation to its surroundings. Center says "this is something we separate by visually different positioning".

  • "It's not valid"
    Yes it is. It's just deprecated, as in, could be removed later. For 15+ years now. And it's not going anywhere, apparently. There are major sites (including google.com) that use this tag because it's very readable and to the point - and those are the same reasons we like HTML5 tags for.

  • "It's not supported in HTML5"
    It's one of the most widely supported tags, actually. MDN says "its use is discouraged since it could be removed at any time" - good point, but that day may never come, to quote a classic. Center was already deprecated in like 2004 or so - it's still here and still useful.

  • "It's oldschool"
    Shoelaces are oldschool too. New methods don't invalidate the old. You want to feel progressive and modern: fine. But don't make it the law.

  • "It's stupid / awkward / lame / tells a story about you"
    None of these. It's like a hammer: one tool for a specific job. There are other tools for the same job and other jobs for the same tool; but it was created to solve a certain problem and that problem is still around so we might as well just use a dedicated solution.

  • "You shouldn't do this, because, CSS"
    Centering can absolutely be achieved by CSS but that's just one way, not the only one, let alone the only appropriate one. Anything that's supported, working and readable should be ok to use. Also, the same argument happened before flexboxes and CSS grids, which is funny because back then there was no CSS way to achieve what center did. No, text-align:center is not the same. No, margin:auto is not the same. Anyone who argued against center tags before flexbox simply didn't know enough about CSS.

TL;DR:

The only reason not to use <center> is because people will hate you.

3
  • 6
    The best answer I have read in this question. For the record I will continue to use <center>. Sep 6, 2020 at 14:28
  • 5
    Yep, I was surprised to see it but Google is still using it on its home page in 2021. Jun 25, 2021 at 10:32
  • 2
    Your IDE will also hate you... but that's not gonna stop me! Jan 6, 2022 at 12:47
23

I still use the <center> tag sometimes because nothing in CSS works as well. Examples of trying to use a <div> trick and failing:

<div style="text-align: center;">This div is centered, but it's a simple example.</div>
<br />
<div style="text-align: center;"><table border="1"><tr><td>&lt;div style="text-align: center;"&gt; didn't center correctly.</td></tr></table></div>
<br />
<div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td>&lt;div style="text-align: center;margin-left:auto;margin-right:auto"&gt; still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with &lt;center&gt; tag</td></tr></table></center>

<center> gets results. To use CSS instead, you sometimes have to put CSS in several places and mess with it to get it to center right. To answer your question, CSS has become a religion with believers and followers who shunned <center> <b> <i> <u> as blasphemy, unholy, and much too simple for the sake of their own job security. And if they try to take your <table> away from you, ask them what the CSS equivalent of the colspan or rowspan attribute is.

It is not the abstract or bookish truth, but the lived truth that counts.
-- Zen

2
  • 1
    You also could use display:flex; justify-content:center; text-align:center
    – Justin Liu
    May 25, 2020 at 18:58
  • 2
    Note that in the third example, you set margin-left:auto; margin-right:auto in the wrapper <div>, but those styles should be set in the element to be centered (i.e. the <table>) instead. Indeed, with that change, the third example does center the table correctly. That said, this type of fragility/complexity does illustrate how the CSS way to center is less usable than the plain old <center> tag.
    – waldyrious
    Sep 28, 2022 at 15:24
17

According to W3Schools.com,

The center element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

The HTML 4.01 spec gives this reason for deprecating the tag:

The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center".

8
  • 23
    I so wish this was actually true.
    – badp
    Feb 12, 2010 at 1:11
  • 75
    This is actually true, but DIV's align atribute is also deprecated :D Jul 26, 2010 at 23:40
  • 29
    Note that w3schools is not W3C.
    – showdev
    Sep 5, 2013 at 0:27
  • 5
    "The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center"." except it is clear by looking at the tag that it is centered. If this was a valid reason, we could depricate <strong>, <b>, all <h> and other tags and say they do the same thing as <span> with some css. besides, XHTML doesn't even recognize HTML5 tags such as canvas. It is only deprecated because of the war against marquees, centers, tables, frame which is purely religious, as they all have a place.
    – Dmytro
    Jun 5, 2016 at 18:23
  • 2
    @Dmitry <strong> and <h>'s have semantic meaning that goes beyond visual styling. I guess if <center> was still around you could style it with CSS, eg to make its content left justified.
    – Nick Rice
    Dec 8, 2016 at 16:41
16

What I do is take common tasks like centering or floating and make CSS classes out of them. When I do that I can use them throughout any of the pages. I can also call as many as I want on the same element.

.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}

Now I can use them in my HTML code to perform simple tasks.

<p class="text_center">Some Text</p>
1
  • That does not the same as <center>! (If someone like to replace center, that does not fit)
    – mkours
    May 17 at 15:03
12

You can still use this with XHTML 1.0 Transitional and HTML 4.01 Transitional if you like. The only other way (best way, in my opinion) is with margins:

<div style="width:200px;margin:auto;">
  <p>Hello World</p>
</div>

Your HTML should define the element, not govern its presentation.

8

HTML is intended for structuring data, not controlling layout. CSS is intended to control layout. You'll also find that many designers frown on using <table> for layouts for this very same reason.

1
  • 1
    I wish HTML was solely for structuring data... but it isn't. How often have you had to modify HTML before adding in some CSS? (Always for me). Nowadays, we use tools like React to separate data (and logic) from the layout/styling, and many now end up using JSX for layout/styling purposes (e.g. custom "Center" component). We've gone full circle. Jan 6, 2022 at 12:52
8

It's intended that markup, i.e. the HTML tags, represent meaning and structure, not appearance. It was badly mixed up in early versions of HTML but the standards people are trying to clean that up now.

One problem with letting tags control appearance is that your pages don't play well with devices for the handicapped, such as screen readers. It also leads to having lots and lots of tags in your text that don't help clarify the meaning, but rather clutter it with information of a different level.

So CSS was thought up to move formatting/display to a different language, which is separate from the text and can easily be kept that way. Among other things, this allows switching stylesheets to change the appearance of a Web page without touching the other markup. And to be able to do that for lots of pages in one swell foop.

The tools CSS gives you to do this are not always elegant, I'm on your side there. For instance, there is no way to do effective vertical centering. And horizontal centering, if it's not just text amenable to text-align, is not much better.

You have the choice of doing easy, effective and muddled or clean, elegant and cumbersome. I don't understand why Web developers put up with this mess, but I guess they're happy to have at least a chance to get their stuff done.

2
  • 6
    +1: As someone who's not even a web developer, I recognize how cumbersome it can be to specify certain presentational attributes using CSS. I still find it better to use CSS than muddling the structural markup, but... WTF? Who's in charge of defining that CSS spec, random monkeys they found in some remote jungle? Seriously. Nov 25, 2009 at 19:48
  • 4
    Please, don't insult random monkeys in remote jungles!
    – DaveWalley
    Aug 15, 2014 at 16:03
7

For text and images you can use text-align:

<div style="text-align: center;">
    I'm centered.
</div>
2
  • 1
    These are called inline elements. Aug 8, 2014 at 14:26
  • Your solution does not work for <form...>
    – Petrus
    Jul 9, 2022 at 21:57
6

You can add this to your css and use <div class="center"></div>

.center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

or if you want to keep <center></center> and be prepared in case its ever removed, add this to your css

center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}
2
  • That's it. With this few-line fix, you're future-proof.
    – dkellner
    Oct 24, 2020 at 21:52
  • (Notice, however, that display:flex will have side effects. But we get the point.)
    – dkellner
    Oct 24, 2020 at 21:59
4

Food for thought: what would a text-to-speech synthesizer do with <center>?

4
  • 1
    Probably speak "center" or "centered".
    – DaveWalley
    Aug 15, 2014 at 16:01
  • The same as it would do with css' text-align: center; I suppose.
    – MSpreij
    Apr 6, 2016 at 11:52
  • 1
    Yeah, nah, what would it do with "display:inline-block; color:#772fe3; background-repeat:no-repeat; border:17px dotted beige; transform:rotate(3deg)"? I would totally be confused as a screen reader. I think I'd just go with the text. Duh.
    – dkellner
    Dec 5, 2020 at 9:07
  • ...and okay, maybe you're saying "markup should always have a speech representation"; but no, absolutely not, see "div" or "span" for example. HTML is for documents, SSML is for speech.
    – dkellner
    Dec 5, 2020 at 9:08
3

CSS has a text-align: center property, and since this is purely a visual thing, not semantic, it should be relegated to CSS, not HTML.

6
  • 1
    +1 for explaining why it was deprecated in addition to an alternative.
    – moribvndvs
    Nov 25, 2009 at 18:09
  • 10
    but text-align will align the content of the container, not the container itself Nov 25, 2009 at 18:12
  • Ah, yeah, if it's a block-level element, "auto" padding will do it. If it's an inline element, use text-align: center on its parent element. Nov 25, 2009 at 18:25
  • 1
    (oops, I meant auto margin, not padding) Nov 25, 2009 at 18:27
  • @AndreasGrech — <center> does both. It's annoyingly broad.
    – Quentin
    Aug 18, 2016 at 9:38
0

Center is loved in HTML because it is a fast way to prototype your work without the hassle of setting up the CSS in the early stages of your work. Of course, having center used on your finished page becomes a chore in comparison to using CSS to create global centers for various elements. Thus, center will always have a place on the web, and there are still some old school forums around that format centered elements in their posts this way.

In other words, Love the center tag because it's cute and efficient when you need it!

PS: Marquee is also a classic HTML tag that is still around and that looks freaking awesome ^__^

Not the answer you're looking for? Browse other questions tagged or ask your own question.