The Full and Center layout abstraction combines several commonly used utilities together to attempt to vertically and horizontally center content within a container. This layout does not automatically expand to fill any available space, but instead relies upon a container which is already appropriately sized to render content "centered" within the container.

Using Full and Center layout inside of component style definition

You can get all full and center styles applied to your component through the l-fullAndCenter mixin just before any component declaration:

    @include l-fullAndCenter('c-myComponent');
    .c-myComponent {
        // specific component classes.
    }

Full And Center

Fills the available horzontal and vertical space, and centers the content within the container.

HTML

<style>
.g-showFill {
    border: 1px solid blue;
}
</style>
<div style="height: 500px; width: 500px; border: 1px solid gray;">
    <div class="l-fullAndCenter g-showFill">
        <div>Some content here.</div>
    </div>
</div>