In this post
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%;
}
