天天看点

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