Flexbox

Flex Center

Utilities for controls how flex items are centered vertically and horizontally.

Variant

Responsive Dark Mode Light Mode Reduce-Motion Selection-Hover Expand First-Last-Selection Child-Selection Portrait Landscape Fullscreen Hover Group-Hover Focus Group-Focus Focus-Visible Focus-Within Active Visited Checked Disabled

API

class	css
flex-center	justify-content: center; align-items: center;

Usage

Set child elements in flex-center direction.

<div class="flex ... flex-center">
  ...
</div>

HTML

.dummy {
  @extend
    .flex,
    .flex-center;
}

SCSS