详解html的几种水平垂直居中的方式（基础）

<div class="Centered5">
<p>d第五种</p>
</div>

<!-css样式部分-->
/*第五种方法水平垂直居中,新版本的flex水平垂直居中*/
.Centered5{
background-color: darkslateblue;
width: 100%;
height: 500px;
display: flex;
justify-content:center;
align-items: center;
}
.Centered5 p {
width: 200px;
height: 200px;
background-color:fuchsia;
line-height: 200px;
text-align: center;
}