<center> - Centered Text (Deprecated)

The <center> Element

Deprecated HTML 3.2

Caution

This element is obsolete and removed from the HTML specification. Do not use it in new projects. Use CSS properties like text-align: center, flexbox, or grid for centering instead. Modern browsers still support <center> for backward compatibility, but this support may be removed in the future.

The <center> element was a block-level element that horizontally centered all of its inline and block-level content. It was introduced in HTML 3.2 (1997) and deprecated in HTML 4.01 (1999), then completely obsoleted in HTML5 (2014).

Historical Example

This is how the <center> element was used in older websites:

HTML

<center> <h1>Welcome to My Website</h1> <p>This text is centered on the page.</p> <img src="https://via.placeholder.com/150" alt="Centered image"> </center>

Result ▶ Run

While this still works in modern browsers, it mixes presentation with structure, which violates modern web development principles.

Why It’s Deprecated

The <center> element was deprecated for several important reasons:

Separation of Concerns: HTML should describe the structure and meaning of content, while CSS handles presentation and styling. The <center> element violates this principle by embedding visual presentation directly into the markup.

Maintainability: With CSS, you can change the alignment of multiple elements across your entire site by modifying a single stylesheet. With <center>, you must edit each HTML file individually.

Flexibility: CSS provides far more centering options than <center> ever did, including vertical centering, responsive centering, and centering within flex or grid containers.

Semantics: The <center> element conveys no semantic meaning about the content. Modern HTML emphasizes semantic elements that describe what content is, not how it looks.

Accessibility: CSS-based centering works better with assistive technologies and responsive designs, adapting to different screen sizes and user preferences.

Modern Alternatives

Text Alignment with CSS

For centering inline content (text, images, inline elements) within a block container:

HTML

<div class="text-center"> <h1>Welcome to My Website</h1> <p>This text is centered using CSS.</p> <img src="https://via.placeholder.com/150" alt="Centered image"> </div> <style> .text-center { text-align: center; } </style>

Result ▶ Run

The text-align: center property centers inline content within its container. This is the direct replacement for most <center> use cases.

Block Centering with Auto Margins

For centering block-level elements horizontally:

HTML

<div class="container"> <div class="centered-block"> <p>This block element is centered within its parent.</p> <p>It has a maximum width and auto margins.</p> </div> </div> <style> .container { background: #f0f0f0; padding: 20px; } .centered-block { max-width: 400px; margin: 0 auto; background: white; padding: 20px; border: 2px solid #333; } </style>

Result ▶ Run

The margin: 0 auto technique centers block elements by setting left and right margins to auto. The element must have a defined width or max-width.

Flexbox Centering

For centering content both horizontally and vertically:

HTML

<div class="flex-center"> <div class="content"> <h2>Perfectly Centered</h2> <p>Using Flexbox for both horizontal and vertical centering.</p> </div> </div> <style> .flex-center { display: flex; justify-content: center; align-items: center; min-height: 300px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .content { text-align: center; padding: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; } </style>

Result ▶ Run

Flexbox provides powerful centering capabilities. justify-content: center centers horizontally, while align-items: center centers vertically.

Grid Centering

For centering with CSS Grid:

HTML

<div class="grid-center"> <div class="content"> <h2>Grid Centering</h2> <p>CSS Grid makes centering incredibly simple.</p> </div> </div> <style> .grid-center { display: grid; place-items: center; min-height: 300px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; } .content { text-align: center; padding: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; } </style>

Result ▶ Run

The place-items: center property is shorthand for centering both horizontally and vertically in a grid container. It’s the most concise centering method available.

Migration Guide

Here’s how to convert old <center> markup to modern CSS:

Deprecated (Old)

<!-- Don't use this -->
<center>
  <h1>Page Title</h1>
  <p>Some centered text.</p>
  <img src="logo.png" alt="Logo">
</center>

<center>
  <div style="width: 600px;">
    Centered content block
  </div>
</center>

Modern (Correct)

<!-- For centering inline content -->
<div class="text-center">
  <h1>Page Title</h1>
  <p>Some centered text.</p>
  <img src="logo.png" alt="Logo">
</div>

<!-- For centering block elements -->
<div class="centered-block">
  Centered content block
</div>

<style>
.text-center {
  text-align: center;
}

.centered-block {
  max-width: 600px;
  margin: 0 auto;
}
</style>

Quick Replacement Rules

Simple text and inline elements: Replace <center> with a <div> and text-align: center.

Block elements with width: Replace <center> with margin: 0 auto on the block element itself.

Complex layouts: Consider using flexbox or grid for more sophisticated centering that also handles vertical alignment and responsive behavior.

Multiple centered sections: Create a reusable CSS class rather than repeating inline styles or multiple <center> tags.

Historical Browser Support

The <center> element was widely supported during its active lifetime:

Browser	Support Period	Current Status
Netscape	2.0 - 9.0	Legacy support only
Internet Explorer	3.0 - 11.0	Legacy support only
Chrome	All versions	Legacy support only
Firefox	All versions	Legacy support only
Safari	All versions	Legacy support only
Edge	All versions	Legacy support only

Modern browsers maintain backward compatibility with <center> but mark it as obsolete. It does not validate in HTML5 documents and should not be used in any new development.

Tip

While browsers still render <center> correctly, HTML validators will flag it as an error in modern HTML5 documents. Always use CSS-based centering for standards-compliant code.

Related Elements

Generic block container. Use with CSS text-align or flexbox/grid for centering. Learn more →

Paragraph element. Apply text-align: center via CSS class for centered paragraphs. Learn more →

Specifications

The <center> element appeared in the following specifications:

HTML 3.2 (1997): First standardized appearance. The element was created to match existing browser implementations.

HTML 4.01 (1999): Deprecated in favor of CSS text-align property. W3C recommended avoiding it in new documents.

XHTML 1.0 (2000): Marked as deprecated. Strict XHTML prohibited its use entirely.

HTML5 (2014): Completely obsoleted and removed from the specification. Listed in the “obsolete features” section for reference only.

Current Standard: WHATWG HTML Living Standard lists <center> as a non-conforming feature. The specification states it must be treated as a <div> element with text-align: center in the user agent stylesheet.

Further Reading: MDN Web Docs: Deprecated and Obsolete Features