How to Center Anything in CSS (Without Losing Your Mind)

Centering elements in CSS may seem simple at first glance but can quickly become challenging. When I first started out, centering elements always had me scratching my head for a bit, but not anymore. Whether it is centering divs or text, there is a method for everything. In this article, we'll cover 4 foolproof ways to center anything in CSS and save your sanity along the way.

1. The Classic Way: Centering Text with text-align

If you need to center text within a parent element,text-align: center; is your best friend. It works for inline and block elements contained within a block-level parent.

Example:

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

.center-me{
text-align: center
}

This method works beautifully for centering text inside any block-level container. It doesn’t work for centering block-level elements (like divs), but don’t worry, we’ve got that covered in the next steps!

Interactive Example

Here’s a live demo of how text-align centers text inside a container:

See the Pen text-align by Majeedat (@Majeedahwahab) on CodePen.

2. The Magic of Flexbox
Flexbox is a game-changer for centering elements, especially when you need both vertical and horizontal alignment.

Example

<div class="center">
  <div>I’m centered!</div>
</div>

.center{
display: flex; /*turns the parent into a Flexbox container.*/
align-items: center; /*aligns items along the vertical axis.*/
justify-content: center; /*aligns items along the horizontal axis.*/
height: 200px;
 }

Interactive Example

Here’s a live demo of how it works:

See the Pen
magic flexbox by Majeedat (@Majeedahwahab)

3. CSS Grid: My Favorite Method

CSS Grid takes centering to the next level with the place-items shorthand property.

Example:

<div class="grid">
  <div>I’m centered with Grid!</div>
</div>

.grid{
  display: grid; /*turns the parent into a Grid container.*/
  place-items: center; /*centers items both horizontally and vertically with one line.*/
  height: 200px;
}

Interactive Example

Here’s a live demo of how it works:

See the Pen
Place-items by Majeedat (@Majeedahwahab)

4. Centering with margin
For fixed-width elements, margin: auto;is a classic trick.

Example:

<div class="bonus">
I'm centered horizontally
</div>

.bonus{
width: 200px;
margin: auto;
}

Interactive Example

Here’s a live demo of how it works:

See the Pen margin by Majeedat (@Majeedahwahab) on CodePen.

Wrapping Up: Centering Made Simple

Centering doesn’t have to be frustrating. With these techniques, you can center almost anything in CSS. From the simplicity of text-align to the power of Flexbox, Grid, and margin, you have all the tools you need to make centering an easy task.

Try out these techniques in your next project and let me know which one you find most effective! Until next time, your friendly neighborhood writer, MJ.

See you in 2025!!!