CSS Vertical Centering Centering with pseudo element
Example
HTML:
<div class="wrapper">
<div class="content"></div>
</div>
CSS:
.wrapper{
min-height: 600px;
}
.wrapper:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
display: inline-block;
height: 80px;
vertical-align: middle;
}
This method is best used in cases where you have a varied-height .content centered inside .wrapper; and you want .wrapper's height to expand when .content's height exceed .wrapper's min-height.
