Content Alignments (with Positions)
Enable the both vertically and horizontally alignment with a position utilities.
Assuming the parent element has
position: relative;, these properties will center a child element both horizontally and vertically inside, no matter what the width of height of either are.
I am vertically centered
I am centered
<div class="position-relative bg-primary" style="width: 200px; height: 200px;"> <p class="bg-white content-centered-y p-3 mb-0">I am vertically centered</p> </div> <div class="position-relative bg-primary" style="width: 200px; height: 200px;"> <p class="bg-white content-centered p-3 mb-0">I am centered</p> </div>
Although beware if the child element being centered is taller than parent, the top could get cut off.
Space does not include all classes, but includes only used classes to reduce the size of CSS files. However, you can add more sizes by adding entries to the Sass map variable via: