The first
.parent {
position: relative;
}
.child {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
<div
class="parent"
style="background: blue; width: 500px; height: 250px;"
>
<div
class="child"
style="color: white;"
>
I'm center
</div>
</div>
The second
.container-flexbox {
align-items: center;
display: flex;
justify-content: center;
}
<div
class="container-flexbox"
style="background: green; width: 500px; height: 250px;"
>
<div
style="color: white;"
>
I'm center
</div>
</div>
The third
.container-grid {
display: grid;
place-content: center;
}
<div
class="container-flexbox"
style="background: orange; width: 500px; height: 250px;"
>
<div
style="color: white;"
>
I'm center
</div>
</div>
Post comment 取消回复