CSS Center Using Offsets

Offsets combined with transforms can center elements.

Preview

Code

<style>
.container{
position:relative;
height:150px;
background:#e5e7eb;
}

.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#2563eb;
color:white;
padding:10px;
}
</style>

<div class="container">
<div class="box">Centered</div>
</div>

More CSS Position Offsets Examples (7)