HTML <center> Tag

The <center> tag was used in older versions of HTML to center content horizontally within its parent container. It was a block-level element, meaning it would create a line break before and after the content it enclosed. However, the <center> tag has been deprecated in HTML5 and should no longer be used.

Syntax

<center>
  Content to be centered
</center>

Attributes

The <center> tag does not support any specific attributes. It's a simple container that applies default styling for centering.

Example

<center>
  <h1>This heading is centered (but don't use &lt;center&gt;!)</h1>
  <p>This paragraph is also centered.</p>
</center>

More Examples

Basic Centering with <center>

This example demonstrates how the <center> tag used to work.

<center>
  <img src="image.jpg" alt="Centered Image" width="200">
  <br>
  <p>This image and text are centered.</p>
</center>

Why Not Use <center>?

The <center> tag is deprecated because it mixes content with presentation. Modern web development practices advocate using CSS for styling, separating structure (HTML) from style (CSS). This leads to cleaner code and easier maintenance.

Modern Alternatives

Here are a few modern alternatives to achieve the same visual result using CSS:

Using text-align: center; for inline content:

<div style="text-align: center;">
    <p>This text is centered within its div using CSS.</p>
    <img src="image.jpg" alt="Centered Image" width="200">
</div>

This approach is suitable for centering text, inline elements and images within a container.

Using Flexbox for flexible layouts:

<div style="display: flex; justify-content: center;">
    <div>
      <p>Content centered with Flexbox.</p>
      <img src="image.jpg" alt="Centered Image" width="200">
    </div>
</div>

Flexbox is ideal for creating more complex layouts, including centering and distributing space within a container. This centers the entire flex container. You can also center items vertically with flexbox by adding align-items: center; in the above example.

Using CSS Grid

<div style="display: grid; place-items: center;">
  <div>
    <p>Content centered with Grid.</p>
        <img src="image.jpg" alt="Centered Image" width="200">
  </div>
</div>

CSS Grid is a powerful layout tool that can easily center items both horizontally and vertically using place-items.

Browser Support

The <center> tag is supported by all major browsers because of the backward compatibility. However, it's strongly advised to avoid using it.

Notes and Tips

• Avoid Using <center>: Do not use the <center> tag in modern web development. It's deprecated and not semantically meaningful.
• CSS is the Way to Go: Always use CSS to control the presentation and layout of your web pages.
• Flexbox and Grid: Learn to use Flexbox and CSS Grid for robust, flexible, and modern layouts.
• text-align: center; for Inline Content: Use text-align: center; for centering inline elements like text and images within a block-level element.
• Maintainability: Separating concerns by keeping style in CSS makes your code easier to maintain and understand.