How to vertically center an element without Flex

#css #html #webdev #jetthoughts

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%);
}

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;
}

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%;
}
Comments