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

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered1">
 <p>d第一种</p>
</div>

<!-css样式部分-->
 .Centered1{
 background-color: #800070;
 width: 100%;
 height:500px;
 position: relative;
 }
 .Centered1 p{
 width: 200px;
 height: 200px;
 background-color: deeppink;
 line-height: 200px;
 text-align: center;
 position: absolute;
 left: 0;
 bottom: 0;
 right:0;
 top: 0;
 margin: auto;
 }

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered2">
 <p>d第二种</p>
</div>

<!-css样式部分-->
/*第二种方法水平垂直居中*/
 .Centered2{
 background-color: #ef8518;
 width: 100%;
 height: 500px;
 position: relative;
 }
 .Centered2 p {
 position: absolute;
 width: 200px;
 height: 200px;
 background-color:red;
 line-height: 200px;
 text-align: center;
 left: 50%;
 top:50%;
 margin-left:-100px;
 margin-top: -100px;
 }

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered3">
 <p>d第三种</p>
</div>

<!-css样式部分-->
/*第三种方法水平垂直居中*/
 .Centered3{
 background-color: dimgrey;
 width: 100%;
 height: 500px;
 position: relative;
 }
 .Centered3 p {
 position: absolute;
 width: 200px;
 height: 200px;
 background-color:darkorange;
 line-height: 200px;
 text-align: center;
 left: 50%;
 top: 50%;
 transform:translate(-50%,-50%);
 } 

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered4">
 <p>d第四种</p>
</div>

<!-css样式部分-->
/*第四种方法水平垂直居中,老版本flex布局*/
 .Centered4{
 background-color: #FF4444;
 width: 100%;
 height: 500px;
 display: -webkit-box;
 -webkit-box-pack:center;
 -webkit-box-align: center;
 }
 .Centered4 p {
 width: 200px;
 height: 200px;
 background-color:cadetblue;
 line-height: 200px;
 text-align: center;
 }

<!--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;
 }