水平居中方法：
<style>
.container{
display: flex;
justify-content: center;
}
.box{
width: 300px;
}
</style>
<div class="container">
<div class="box">
<p>偶是要居中的内容</p>
</div>
</div>通过设置父元素container为flex布局，并使用justify-content:center属性可以实现水平居中。此时，父元素的宽度会随内部元素的宽度自适应。
垂直居中方法：
<style>
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box{
width: 300px;
}
</style>
<div class="container">
<div class="box">
<p>偶是要居中的内容</p>
</div>
</div>通过设置container父元素为flex布局，并使用align-items:center属性可以实现垂直居中。此时，父元素的高度需要设置为视口高度100vh，否则无法正常居中。
如果希望同时实现水平垂直居中，只需在父元素的flex布局中设置align-items和justify-content属性即可。