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;