Flexbox

Flex Center

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


Variant

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

API

classcss
flex-centerjustify-content: center;
align-items: center;

Usage

Set child elements in flex-center direction.

1
<div class="flex ... flex-center">
...
</div>
HTML
.dummy {
@extend
.flex,
.flex-center;
}
SCSS