Vertical Align Center

To make content vertical center.

by lotabout

HTML

<div class="container">
  <div class="vertical">
    <p>
      Easy 3 step and here I am!
    </p>
  </div>
</div>

CSS

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

.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid green;
}