How to vertically center an element without Flex

How vertically center with Flex you can view Vertical align with a full screen across Tailwind CSS

<div class="outer">
  <div class="inner">Centered</div>
</div>

Transform Translate #

It’s possible to center it by nudging it up half of it’s height after bumping it down halfway:

.outer {
  position: relative;
  height: 100vh;
}
.inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

This works because the two percentages measure different things. top: 50% is half the height of .outer, so it moves the top edge of .inner to the middle. A percentage inside translateY() is measured against the element’s own height (MDN: translateY()), so -50% pulls it back up by half of itself. You never need to know that height. In a 300px test box, a two-line .inner ended up with exactly 130px above and 130px below it.

Display: Table-Cell #

Outer element to be displayed as a table and the inner element to be displayed as a table-cell which can then be vertically centered.

.outer {
  display: table;
  height: 100vh;
}
.inner {
  display: table-cell;
  vertical-align: middle;
}

vertical-align only applies to inline, inline-block and table-cell elements (MDN: vertical-align). That is why .inner has to become a table cell first. On an ordinary block it does nothing.

Fixed Height #

Set margin-top: -yy where yy is half the height of the inner container to offset the item up.

.outer {
  position: relative;
  height: 100vh;
}
.inner {
  position: absolute;
  height: 100px;
  margin-top: -50px;
  top: 50%;
}

The catch is in the name. This only centers the element while it is exactly 100px tall. Let the same box grow to 200px and it still sits 100px from the top, so it touches the bottom edge. If the content can change, use the transform version instead.

Grid #

Flex isn’t the only modern option. Grid centers in both directions with two lines on the parent, and the child needs no styles at all:

.outer {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center sets both the block and the inline alignment of the grid items (MDN: Center an element). Note min-height rather than height. Unlike the absolute-positioning tricks, .inner stays in normal flow, so with min-height the parent grows when the content is taller than the screen. With a fixed height: 100vh, a 900px child in a 600px window spilled 300px past the bottom of .outer instead.

Choosing between grid, transform and table-cell #

• New code: grid. It is the shortest and doesn’t depend on the child’s height.
• The parent’s height is set and the child’s height varies: transform translate.
• Old table-based layouts: table-cell, since you are already in that model.
• Fixed height: only when the element really never changes size.