flex
<div class="container">
<div class="inner">
<p>hello world</p>
</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
transform -50%
<div class="container">Hello World!</div>
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // 自身宽度和高度的一半
border: 1px solid red;
}