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
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