@atheon/flex-center v1.0.0

flex-center

The flex-center component (provided as myth-flex-center) centers itself in its parent container, and then centers its content within itself.

Want to center something right now? Use this!

Usage

1. Run ng add @atheon/flex-center.
2. Add the <myth-flex-center> element to a template.
3. Put stuff in it, whatever you want. Even interpolated content!*
4. The stuff is now centered in the thing you put <myth-flex-center>

* Interpolated content containing HTML will have the HTML escaped. To supply a string containing HTML, bind to the contentOverride property.

Example (Typical)

<your-great-component>
    <div>
        <myth-flex-center>Put anything here, doesn't matter! It's magic</myth-flex-center>
    </div>
</your-great-component>

Example (Content Override)

<your-great-component>
    <div>
        <myth-flex-center [contentOverride]="myPropertyContainingContent"></myth-flex-center>
    </div>
</your-great-component>