Vertical align anything with 3 lines of code

suggest change

Supported by IE11+

View Result

Use these 3 lines to vertical align practically everything. Just make sure the div/image you apply the code to has a parent with a height.


div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);


<div class="vertical">Vertical aligned text!</div>

Feedback about page:

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

Table Of Contents