Skip to main content

Content Alignments (with Positions)

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 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>

Note

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

Important

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: assets/include/scss/base/_content-centered.scss.