Utilities

Vertical Alignment

"Learn CSS in 24 Hours"

After 3 hours, you've learnt all of CSS.

Hours 3 to eternity are spent trying to vertically center stuff.

In scenarios where heights are fixed and items need to be placed in the absolute center, we provide a .u-vertical-align-center class.

Note: When using .o-layout, vertical alignment can be achieved with the provided modifiers.

<div class="u-vertical-align-center">I'm vertically centered</div>

If the vertical alignment renders on half a pixel, it can cause visual issues. This can fixed by using the optional -parent class to preserve-3d:

<div class="u-vertical-align-parent">
  <div class="u-vertical-align-center">I'm vertically centered (with a parent)</div>
</div>