Vertical Align Center

To make content vertical center.

by lotabout

HTML

<div class="container">
  <div class="vertical">
    <p>
      Why I am not vertical center -_-?
    </p>
  </div>
</div>

CSS

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

.vertical {
  margin-top: calc(50% - 50px);
  border: 1px solid green;
  height: 100px;
}