How to center vertically with CSS?

Vertically centering is often a dreaded (and forgotten 🥲) task by developers. It is frequently experienced as a frustrating situation where the inability to find a simple solution results in a failure or sidelining!

Fortunately, with time, new techniques for vertically centering have emerged.

Today, there are five of them:

1. using Flexbox - which is one of the two most recent techniques;
2. using CSS Grids - which is the other most recent technique;
3. using the line-height property - which is quite old;
4. using absolute positioning - known only to the old-timers;
5. and using tables - known only to a few rare developers.

Let's delve into each of these vertical centering methods in a bit more detail! Hold on tight: we're starting! 😉

How to Vertically Center with Flexbox?

Using the items-center Property

To vertically center with Flexbox, simply follow these two steps:

1. Create a parent element (here the container) that has the display: flex property to activate Flexbox;
2. Add the align-items: center property to vertically center the child elements.

If you don't know what Flexbox is, here's a comprehensive guide to help you understand everything about it.

Starting from this principle, here's an example:

.container {
  display: flex; /* Initialize Flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 400px; /* Container height */
  border: 1px solid black; /* Add a black border */
}

And the HTML code:

<div class="container">
  <p>This text is vertically centered with Flexbox</p>
</div>

Easy! You can also test this code yourself:

In this example, the text is centered horizontally and vertically in the middle of the container with a height of 400px.

Using the align-self Property

It is also possible to center only a specific element inside a parent that uses Flexbox.

To do this, use the align-self property directly on the element you want to vertically center:

.container {
  display: flex;
  height: 400px;
}

.center-element {
  align-self: center;
}

In this example, only the element with the class .center-element will be vertically centered, while the other elements in the container will remain unaffected.

How to Vertically Center with CSS Grids?

CSS Grids (also known as Grid Layout) are another solution to vertically center content with CSS.

Just like with Flexbox, you can use the justify-items and align-items properties:

.container {
  display: grid; /* Activate grids */
  justify-items: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 400px;
  border: 1px solid black;
}

And for our HTML:

<div class="container">
  <p>This content is vertically centered with a CSS Grid</p>
</div>

Test it yourself:

As you can see, the example looks very similar to Flexbox. In fact, the only difference is the display: grid property.

We prefer CSS Grids over Flexbox in very complex scenarios where multiple elements need to be aligned simultaneously in different directions.

How to Vertically Center with line-height?

To vertically center text in a container with a fixed height, you can use the line-height property. This method is often used for short text elements like buttons or headings.

Here's how you should do it:

1. First, define a fixed height (this is very important) for the parent;
2. Set the line-height value to be equal to the height of the parent element.

Let's take a small example:

.text-block {
  height: 100px; /* Set a height of 100px */
  line-height: 100px; /* Also set line-height to 100px here */
  border: 1px solid black;
}

And the HTML:

<div class="text-block">
  This content is vertically centered with line-height
</div>

The result:

In this example, the text is perfectly centered inside the container with a height of 100px thanks to the line-height property.

This method works only for single-line text blocks. If the text spans multiple lines, this technique will no longer be effective.

How to Vertically Center with position: absolute?

Another common technique to vertically center an element is to use the position: absolute property. By combining this property with adjustments on the top, bottom, left, and right axes, you can center an element relative to its parent quite easily. 😬

Here's how you can do it:

1. Add the position: relative property to the parent tag so that your absolute element references the parent tag and not the body tag;
2. Set the position: absolute property on the element you want to center vertically;
3. Then adjust everything with the top, bottom, left, and right properties if needed, as well as the transform property to move your element.

Here's an example:

.container {
  position: relative; /* Set relative positioning */
  height: 400px;
  border: 1px solid black;
}

.center-element {
  position: absolute; /* Set absolute positioning */
  top: 50%; /* Position the element at 50% from the top */
  left: 50%; /* Then at 50% from the left */
  transform: translate(-50%, -50%); /* Re-center the element on both axes */
}

Finally, here's our HTML:

<div class="container">
  <p class="center-element">
    This content is vertically centered with absolute positioning
  </p>
</div>

Try this code:

Here, the transform: translate(-50%, -50%) technique allows you to bring the element to the exact center of its container, both vertically and horizontally.

Don't forget that this method is extremely powerful, but it requires that the parent element has a relative position.

How to Vertically Center with display: table?

Before the arrival of Flexbox and CSS Grids, a classic method to vertically center an element was to simulate a table structure with display: table. Although less popular today, it is very useful for impressing during technical interviews.

Let's take this example:

.container {
  display: table; /* Define as table */
  height: 400px;
  width: 100%;
  border: 1px solid black;
}

.center-element {
  display: table-cell; /* Simulate table cells */
  vertical-align: middle; /* Vertically center the single cell */
}

And in our HTML:

<div class="container">
  <p class="center-element">
    This content is vertically centered with a table
  </p>
</div>

And the live demonstration:

In this example, we use the vertical-align: middle property to vertically center the text in a container simulating a table cell.

When using display: table-cell, the element is treated like a table cell, which gives access to table-specific properties like vertical-align and text-align.

Comparison of Vertical Centering Methods

Conclusion

Vertical centering with CSS is no longer as complicated as it often was decades ago!

Nowadays, with new-generation techniques (thanks to Flexbox and Grids), centering text or an image vertically can be done in 4 seconds flat. ✨

To go further with HTML and CSS, check out our dedicated training.