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