Skip to content

Center

Centers content horizontally and vertically. Equivalent utilities: af-flex af-justify-center af-items-center, or display: grid; place-items: center.

Class reference

Class	Purpose	Example
`af-center`	Center contents on both axes	`<div class="af-center">`

Example

<div class="af-center" style="min-height: 200px;">
  <div class="af-card">
    <p class="af-card__body">Centered</p>
  </div>
</div>

Explicit equivalent:

<div class="af-inline af-justify-center af-items-center" style="min-height: 200px;">
  <div class="af-card">
    <p class="af-card__body">Centered</p>
  </div>
</div>