CSS讓塊元素在div水準居中，并且垂直居中的方法

方法一 ：使用彈性盒。

//給父元素設定這三條屬性：
display : flex;   
justify-content : center;   //水準方向居中
align-items : center;      //垂直方向居中      

方法二：使用定位，适用于大小确定的元素，也就是有寬高的元素。

// 給父元素設定屬性：
position: relative;
// 給子元素設定這些屬性：
position: absolute; 
margin: auto;
top: 0;bottom: 0;      //垂直方向居中
left: 0; right: 0;       //水準方向居中      

方法三：跟方法二相似。

// 給父元素設定屬性：
position: relative;
// 給子元素設定這些屬性：
position: absolute; 
left:50%;top:50%;
margin: - (子元素高的1/2)  px   0   0   - (子元素寬的1/2)  px;      

// 給父元素設定屬性：
position: relative;
// 給子元素設定這些屬性：
position:absolute;
    left:50%;top:50%; 
    transform:translate(-50%,-50%);      

// 給父元素設定屬性：
text-align:center;
// 給子元素設定屬性：
display:inline-block;  //設定為行内塊
vertical-align:middle;
// 添加一個僞元素：
父元素::after{
            content:""; 
            height:88px;    //高度和父元素一緻
            display:inline-block;  //設定為行内塊
            vertical-align:middle;
}