块级元素垂直居中的两种方式

Posted 2020-08-02

第一种方式：利用相对定位将子元素的位置设为父元素高度的一半，再将子元素的margin-top设为自身高度一半，且为负值。

<div class="a">   
 <div class="b"></div>
</div>
.a{

    width: 500px;
    height: 500px；
    position: relative;
}
.b{
    width: 100px;
    height: 100px;
　　/*相对定位至父元素高度一半*/
    position: absolute;
    top: 50%；
   /*上外边距设置为自身的一半，负值*/
　　margin-top: -50px;

}


第二种方式：利用相对定位将子元素位置设为top：0；bottom：0；在用margin:auto 0;

.b{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0；
　　 bottom:0;
　　margin:auto 0;
}