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>