Documentation | Graindashboard UI Kit

Positions

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.

Result
HTML

I am centered.


  <div class="position-relative bg-primary" style="width: 200px; height: 200px;">
    <div class="bg-white position-absolute position-centered p-3">I am centered.</div>
  </div>

Note

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