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.

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.

Important

Nova 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/utilities/_position.scss.