Alignment

Alignment of content, whether it's horizontal or vertical, or both

Tip: Give your .u-center-block element some height. If you don't your content will appear to only align horizontally.

Centered

Hello Blaze
<div class="u-center-block">
  <div class="u-center-block__content">Hello Blaze</div>
</div>

Vertical

Hello Blaze
<div class="u-center-block">
  <div class="u-center-block__content u-center-block__content--vertical">Hello Blaze</div>
</div>

Horizontal

Hello Blaze
<div class="u-center-block">
  <div class="u-center-block__content u-center-block__content--horizontal">Hello Blaze</div>
</div>

Centered Absolutely

To position an element perfectly in the center of a relative container use the .u-absolute-center block.

Hello Blaze
<div class="u-absolute-center">Hello Blaze</div>