Vertical Align Center

To make content vertical center.

by lotabout

HTML

<div class="container"><!-- remove the 
space --><div class="vertical">
    <p>
      Look, the left space disappeared!
    </p>
  </div>
</div>

CSS

.container {
  border: 1px solid blue;
  height: 200px; /* maybe any height */
}

.container::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  font-size: 0;
}

.vertical {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid green;
  width: 100%;
  box-sizing: border-box;
}