W3docs
en
Log in

HTML <center> Tag

The <center> tag aligns the content to the center. Its equivalent in CSS is the text-align property. See examples.

The HTML <center> tag is obsolete and must not be used in new pages. It was a block-level element that horizontally centered everything inside it, but it was removed from the HTML standard and is no longer supported in HTML5. Modern browsers may still render it for backward compatibility, but its behavior is not guaranteed, and it will not validate.

This page explains what <center> used to do and, more importantly, shows the CSS techniques that replace it: text-align: center for inline content, margin: 0 auto for block elements, and Flexbox for centering both horizontally and vertically.

Danger

The <center> tag is a deprecated HTML tag and is not supported in HTML5. Presentation belongs in CSS, not in HTML markup. Use the CSS techniques below instead.

The conceptual difference: inline vs. block centering

Before picking a technique, decide what you are centering. This is the single most common source of confusion.

  • Centering inline content (text, images, inline elements) inside a container: use text-align: center on the container. The container keeps its full width; only its content shifts to the middle.
  • Centering a block element (a <div>, <section>, a card) within its parent: use margin: 0 auto on the block itself. The block must have a width smaller than its parent, otherwise it already fills the row and there is nothing to center.

In short: text-align centers things inside a box; margin: auto centers the box itself.

Centering inline content with text-align

Apply text-align: center to the parent element. The element's dimensions don't change — only the content inside it is centered.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This text is aligned to the left.</p>
    <p style="text-align:center">And this one is placed in the center.</p>
  </body>
</html>
Try it Yourself »

This is the direct replacement for <center> when all you want is centered text.

Centering a block element with margin: 0 auto

To center a block-level element horizontally within its parent, give it a width and set its left and right margins to auto. The browser then splits the remaining horizontal space equally on both sides.

margin: 0 auto is shorthand for "0 top/bottom, auto left/right." Under the hood it sets the same margin-left and margin-right to auto.

The width is required. A block element with no width set fills 100% of its parent by default, leaving no spare space for the auto margins to distribute — so nothing appears to move. Once the element is narrower than its parent, auto margins center it.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="margin:0 auto; width:50%; background:#eee;">
      This block is centered horizontally.
    </div>
  </body>
</html>
Try it Yourself »

Note that margin: auto only centers horizontally — it does not center a block vertically.

Centering both ways with Flexbox

When you need to center content horizontally and vertically at the same time, Flexbox is the modern, reliable choice. Make the container a flex container, then use justify-content: center for the horizontal axis and align-items: center for the vertical axis.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="display:flex; justify-content:center; align-items:center;
                height:200px; border:1px solid #ccc;">
      <p>This box is centered both horizontally and vertically.</p>
    </div>
  </body>
</html>

Here display:flex turns the <div> into a flex container, justify-content:center centers its children along the main (horizontal) axis, and align-items:center centers them along the cross (vertical) axis. The height is set so there is vertical space to center within.

For a full walkthrough of these properties and the rest of the layout model, see The Ultimate Guide to Flexbox.

What the old <center> tag looked like

For reference only — do not use this in new code. The <center> tag came in pairs and centered everything between the opening and closing tags:

<p>This text is aligned to the left.</p>
<center>And this one is placed in the center.</center>
Try it Yourself »

The equivalent modern markup is simply <p style="text-align:center">…</p>, shown above.

Practice

Practice
Which statements are true regarding the HTML <center> tag?
Which statements are true regarding the HTML <center> tag?
Was this page helpful?