CSS Centering Vertical align anything with 3 lines of code

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

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.

CSS

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

HTML

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


Got any CSS Question?