HTML Guides for center

The <center> element is a presentational HTML tag that dates back to early web development. The HTML5 specification formally made it obsolete because it violates the principle of separating content (HTML) from presentation (CSS). While most browsers still render <center> correctly for backward compatibility, relying on it is discouraged for several reasons:

• Standards compliance: Using obsolete elements means your HTML does not conform to the current HTML specification, which can cause W3C validation errors.
• Maintainability: Inline presentational elements scatter styling throughout your markup, making it harder to update the design of your site consistently. CSS allows you to control layout from a single stylesheet.
• Accessibility: Semantic HTML helps assistive technologies understand content structure. The <center> element carries no semantic meaning and adds noise to the document.
• Future-proofing: Browser support for obsolete elements is not guaranteed indefinitely. Using CSS ensures your layout will work reliably going forward.

To fix this issue, replace every <center> element with an appropriate CSS technique. The right approach depends on what you’re centering.

For inline content (text, images, inline elements), apply text-align: center to the parent container.

For block-level elements (divs, sections, etc.), use margin: 0 auto along with a defined width, or use Flexbox on the parent.

Examples

❌ Obsolete: using <center>

<center>
  <p>This text is centered.</p>
</center>

✅ Fixed: using text-align for inline content

<div style="text-align: center">
  <p>This text is centered.</p>
</div>

Or better yet, use a CSS class to keep styles out of your HTML:

<div class="centered-text">
  <p>This text is centered.</p>
</div>

.centered-text {
  text-align: center;
}

❌ Obsolete: centering a block element with <center>

<center>
  <div>This box is centered.</div>
</center>

✅ Fixed: centering a block element with margin: auto

<div class="centered-box">
  <p>This box is centered.</p>
</div>

.centered-box {
  max-width: 600px;
  margin: 0 auto;
}

✅ Fixed: centering with Flexbox

Flexbox is a powerful and flexible way to center content both horizontally and vertically:

<div class="flex-center">
  <p>This content is centered.</p>
</div>

.flex-center {
  display: flex;
  justify-content: center;
}

✅ Applying the fix directly to an element

If you only need to center the text within a single element, you can apply the style directly without a wrapper:

<p class="centered">This paragraph is centered.</p>

.centered {
  text-align: center;
}

In every case, the key takeaway is the same: remove the <center> element and use CSS to achieve the desired centering effect. This keeps your HTML clean, semantic, and fully compliant with modern standards.