Vertical Align Center

To make content vertical center.

by lotabout

HTML

<div class="container">
  <div class="horizontal">
    <p>
      Ah ha, I am horizontal centered.
    </p>
  </div>
</div>

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

CSS

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

.horizontal {
  width: 50%;
  margin: 0 auto;
  border: 1px solid green;
}

.vertical {
  margin: auto 0;
  border: 1px solid green;
}