5 #Center utility classes Center utility classes
5.1 #Center utility classes.centered Centered box
-sf-centered-box
Sets box's right and left margins to auto to center the box horizontally if it has width.
Centered box with fixed width
Html
<div style="width: 200px" class="-sf-centered-box">Centered box with fixed width</div>5.2 #Center utility classes.full-height Expands element to 100% height of parent
-sf-full-height
Grey child is as tall as parent
Html
<div style="height: 300px; width: 300px; border:1px solid #eee">
<div class="-sf-full-height" style="background-color: #fefefe;">Grey child is as tall as parent</div>
</div>5.3 #Center utility classes.horizontally-vertically-centered Centered horizontally and vertically box
-sf-centered-vertical-box Sets box's right and left margins to auto to center the box horizontally if it has width and set it's display to flex and min-height to 100% of the view height.
Centered box with fixed width
Html
<div class="-sf-centered-vertical-box">Centered box with fixed width</div>