← Back to All Tags

<center>

NOT supported in HTML5. Use CSS instead.

⚠️ DEPRECATED

Definition and Usage

⚠️ Not Supported in HTML5
The <center> tag is NOT supported in HTML5. Use CSS properties like text-align, margin, flexbox, or grid instead.

The <center> tag was used in older HTML versions to center-align text and other elements horizontally within their containing element.

This tag mixed presentation with content structure, which goes against modern web development best practices of separating content (HTML) from presentation (CSS).

Important: While some browsers may still render the <center> tag for backward compatibility, you should never use it in new projects. Always use CSS for styling and layout.

Browser Support

The <center> tag is NOT supported in HTML5:

Chrome
Chrome
Not Supported
Firefox
Firefox
Not Supported
Safari
Safari
Not Supported
Edge
Edge
Not Supported
Opera
Opera
Not Supported

Old Usage (HTML 4)

In older HTML versions, the <center> tag was used to center content:

Old HTML 4 Example (Don't Use)

<!-- HTML 4 - DEPRECATED -->
<center>
  <h1>Welcome to My Website</h1>
  <p>This content is centered.</p>
</center>

Modern CSS Alternatives

Here are the correct modern ways to center content using CSS:

1. Text-Align for Inline Content

Use text-align: center for centering text and inline elements:

Old Way (Don't Use) 
<center>
  <p>Centered text</p>
</center>
Modern Way (Use This) 
<div style="text-align: center;">
  <p>Centered text</p>
</div>

2. Margin Auto for Block Elements

Use margin: 0 auto to center block-level elements:

Old Way (Don't Use) 
<center>
  <div style="width: 300px;">
    Content
  </div>
</center>
Modern Way (Use This) 
<div style="width: 300px; margin: 0 auto;">
  Content
</div>

3. Flexbox for Centering (Horizontal & Vertical)

Use Flexbox for powerful centering capabilities:

Horizontal Centering with Flexbox

<div style="display: flex; justify-content: center;">
  <p>Centered content</p>
</div>

Horizontal and Vertical Centering with Flexbox

<div style="display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;">
  <p>Perfectly centered!</p>
</div>

4. CSS Grid for Centering

Use CSS Grid for modern centering:

Grid Centering

<div style="display: grid;
            place-items: center;
            height: 300px;">
  <p>Centered with Grid</p>
</div>

5. Absolute Positioning with Transform

For absolute positioning scenarios:

Centering with Position

<div style="position: relative; height: 300px;">
  <div style="position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);">
    Centered content
  </div>
</div>

Complete Migration Examples

Example 1: Centered Heading

Old HTML (Don't Use) 
<center>
  <h1>Page Title</h1>
</center>
Modern CSS (Use This) 
<h1 style="text-align: center;">
  Page Title
</h1>

Example 2: Centered Button

Old HTML (Don't Use) 
<center>
  <button>Click Me</button>
</center>
Modern CSS (Use This) 
<div style="text-align: center;">
  <button>Click Me</button>
</div>

Example 3: Centered Container

Old HTML (Don't Use) 
<center>
  <div style="width: 600px;">
    Content here
  </div>
</center>
Modern CSS (Use This) 
<div style="width: 600px;
            margin-left: auto;
            margin-right: auto;">
  Content here
</div>

Example 4: Centered Image

Old HTML (Don't Use) 
<center>
  <img src="logo.png" alt="Logo">
</center>
Modern CSS (Use This) 
<img src="logo.png"
     alt="Logo"
     style="display: block;
            margin: 0 auto;">

Example 5: Multiple Centered Elements

Old HTML (Don't Use) 
<center>
  <h1>Title</h1>
  <p>Paragraph</p>
  <button>Button</button>
</center>
Modern CSS (Use This) 
<div style="text-align: center;">
  <h1>Title</h1>
  <p>Paragraph</p>
  <button>Button</button>
</div>

CSS Centering Methods Comparison

Method Best For CSS Code
text-align Text and inline elements text-align: center;
margin auto Block elements with fixed width margin: 0 auto;
Flexbox Any content, horizontal & vertical display: flex; justify-content: center;
Grid Modern layouts, perfect centering display: grid; place-items: center;
Absolute + Transform Overlays, modals, positioned elements position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

Migration Guide

✅ How to Migrate from <center> Tag:
  1. Find all instances: Search your codebase for <center> tags
  2. Identify content type:
    • Text/inline elements → Use text-align: center
    • Block elements with width → Use margin: 0 auto
    • Complex layouts → Use Flexbox or Grid
    • Images → Use display: block; margin: 0 auto
  3. Apply CSS: Add appropriate CSS to parent element or create CSS class
  4. Remove tag: Delete the <center> opening and closing tags
  5. Test thoroughly: Verify centering works across different screen sizes

Why Was It Deprecated?

  • Separation of Concerns: HTML should define structure, CSS should handle presentation
  • Maintainability: CSS makes it easier to update styles across entire websites
  • Flexibility: CSS offers many more centering options than the <center> tag
  • Responsive Design: CSS allows different centering behavior on different screen sizes
  • Semantic HTML: Div elements with CSS are more semantically neutral
  • Accessibility: Proper semantic HTML with CSS styling improves accessibility
  • Modern Standards: HTML5 emphasizes semantic markup over presentational tags

Try it Yourself

Modern Centering Example

See how modern CSS centering works:

Text-Align Method

This text is centered using text-align: center

Flexbox Method

This box is centered using Flexbox

Grid Method

This box is centered using CSS Grid

Best Practices

  • Never use <center> tag: Always use CSS for centering
  • Use appropriate method: Choose the right CSS centering technique for your use case
  • Consider responsiveness: Test centering on different screen sizes
  • Create reusable classes: Define CSS classes for common centering patterns
  • Use Flexbox/Grid: For complex layouts, prefer modern layout methods
  • Semantic HTML: Use appropriate HTML elements with CSS styling
  • Validate your code: Ensure HTML5 compliance by avoiding deprecated tags

Related Tags and Concepts

  • <div>

    Use this with CSS centering

  • <span>

    For inline content styling

  • <font>

    ⚠️ Also deprecated - use CSS

  • <big>

    ⚠️ Also deprecated - use CSS