How can I vertically align elements in a div?

html

flexbox

grid

vertical-alignment

byAlex Kataev·Aug 4, 2024

To vertically align elements, your go-to option is Flexbox with align-items: center;. This method is both responsive and cross-browser compatible.

<div style="display: flex; align-items: center; height: 100px;">
  <div>Centered content</div>
</div>

Deep-dive into vertical centering techniques

Horizontal alignment is easy, but when it comes to vertical, that's where things get tricky. Let's navigate through the sea of CSS to find the best buoy.

Flexbox: Handle with care

Flexbox is your knight in shining armor for most layout woes.

<!-- Trusty flex, always there when you need it -->
<div style="display: flex; align-items: center; justify-content: center; height: 200px;">
  <div>First knight in armor</div>
  <div>Second knight carrying provisions</div>
</div>

For inside control align-self does the trick. And remember, justify-content provides horizontal alignment, and align-items eyes the vertical.

Grid layout: A newer blade

Flexbox's younger cousin Grid is also quite resourceful:

<!-- Move over, Flex! Grid's got this -->
<div style="display: grid; place-items: center; height: 200px;">
  <div>Centered content</div>
</div>

Notably, Grid is more suitable for complex multi-dimensional layouts.

The table-cell method: Old but gold

Sometimes classic techniques like display: table-cell; come to the rescue when cross-browser compatibility is paramount:

<!-- Dusting off an old relic -->
<div style="display: table; height: 200px;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>Centered content</div>
  </div>
</div>

The line-height maneuver

Ideal for single-line text.

<!-- Lazy? Nah, efficient. -->
<div style="height: 50px; line-height: 50px;">
  <span>Centered text</span>
</div>

Absolute positioning: Tread cautiously

There's always position: absolute;:

<!-- Spiderman mode -->
<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">
    Centered content
  </div>
</div>

Remember to keep an eye on the stacking context and the relative positioning of the parent element.

More vertical centering tricks

In mastering the art of vertical alignment, every detail counts!

Tailoring to content type

Believe it or not, your content answers the "how to align" question: single-line text, block element, or multiple elements with distinct sizes. Adjust your alignment strategy accordingly!

Keeping up with older browsers

Vendor prefixes like -webkit-flex and -ms-flexbox widen your reach to legacy browsers:

.div {
  display: -webkit-flex; /* Yes, old browsers need love too 😌 */
  display: -ms-flexbox;
  display: flex; /* And some modern touch for the rest 😉 */
  /* Other styles */
}