Vertical centering is one of the hardest things to do in CSS. :)
Centering in CSS: A Complete Guide[
^]
If you can use
Flexbox[
^], then it's relatively simple:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
If you can use
2D transforms[
^], then this should work:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
If you're stuck with supporting IE8 or earlier, then there's no real solution, unless both the parent and child elements are a fixed height.