Yugien
Theme

center

The obsolete <center> element centered its contents by mixing layout instructions into HTML. Use CSS for alignment and keep the document structure meaningful.

What you will learn

Historical syntax

<!-- Old markup: do not use for new work. -->
<center>Centered content</center>

The element does not explain what the content means; it only requests a presentation. It also makes it harder to change the layout consistently across a site.

Center text

<p class="centered">Centered text</p>

.centered {
  text-align: center;
}

Center a block

<div class="card">A centered card</div>

.card {
  max-width: 36rem;
  margin-inline: auto;
}

For groups of items, flexbox or grid can control alignment. Choose the layout tool based on the relationship between the items, and use a semantic element such as section or article when the content needs one.

Related pages