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.

Preview
HTML

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