CSS
.selector { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
OR, another approach, with Flexbox:
Note it’s child element that’s centered, within the element the CSS targets.
HTML
<div class=”hv-center”>
<div class=”child”> </div>
</div>
CSS
.hv-center {
display: flex; /*activates flex*/
justify-content: center;
align-items: center; /*vertical*/
}
