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 fixed-height-demo">
  <div class="u-center-block__content">Hello Blaze</div>
</div>

Vertical

Hello Blaze

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

Horizontal

Hello Blaze

<div class="u-center-block fixed-height-demo">
    <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-center-block fixed-height-demo">
    <div class="u-absolute-center">Hello Blaze</div>
  </div>

Centered Text

Use .u-centered to apply text-align: center; to an element.

Hello Blaze

<div class="u-center-block fixed-height-demo">
    <div class="u-centered">Hello Blaze</div>
  </div>