Content Alignments

Enable the both vertically and horizontally alignment with a position utilities.

Centering

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 vertically centered only on medium devices

I am vertically centered only on large devices

                        
                          <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>
                          <div class="position-relative bg-primary" style="width: 200px; height: 200px;">
                            <p class="bg-white content-centered-y-md p-3 mb-0">I am vertically centered only on medium devices</p>
                          </div>
                          <div class="position-relative bg-primary" style="width: 200px; height: 200px;">
                            <p class="bg-white content-centered-y-lg p-3 mb-0">I am vertically centered only on large devices</p>
                          </div>

Note

Although beware if the child element being centered is taller than parent, the top could get cut off.

Important

Front 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: assets/scss/front/utilities/_content-centered.scss.

Contact Us