css 样式 block元素的水平垂直居中

第一种元素居中方式：
给相对居中的父元素添加position:relative；相对定位（默认）。父级都没有默认body进行定位 。 

要定位的元素：
/*设置*/

position: absolute;
left: 50%;
top: 50%;
/*补差*/
margin-top: - <boxHeight/2> px;
margin-left: - <boxWidth/2> px;

第二种：通过 vertical-align: middle;属性实现水平或垂直居中。 

 

 

 1）、给父元素绑定一个伪元素（参考元素）css：

body::after {
    content: "";
    display: inline-block; /*设置为inline-block是因为想让该元素的大小由其内部撑开且能设置它的宽高，这样我们就能意义上的"参考线"了*/
    height: 100% /*水平：width:100%;*/
    vertical-align: middle;
}
2）、要水平或垂直居中的元素：

display: inline-block;/*保持相同，即只能运用于可inline-block的元素*/
width: 100px;
height: 100px;
vertical-align: middle;