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.

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