Centering with pseudo element

suggest change


<div class="wrapper">
  <div class="content"></div>


   min-height: 600px;

  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.

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents