flex + margin: auto

父节点使用 display: flex, 子节点使用 margin: auto

<style>
.flex {
display: flex;
width: 300px;
height: 300px;
background: #ccc;
margin-bottom: 5px;
}
.flex p {
margin: auto;
}
</style>
<div class="flex">
<p>content</p>
</div>

flex 结合 justify-content、align-items

<style>
.flex2 {
display: flex;
width: 300px;
height: 300px;
background: #ccc;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
</style>
<div class="flex2">
<p>content</p>
</div>

绝对定位 + 相对定位

<style>
.position {
position: relative;
width: 300px;
height: 300px;
background: #ccc;
}
.position p {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
<div class="position">
<p>content</p>
</div>