css垂直居中元素

要居中一个元素，很多人都会想到使用postion样式属性，如果定位 top: 50%，则只是使得元素的上边框根据父元素进行居中，如下图：

#div2{
     position: absolute;
     top: 50%;
}

        

大家可能已经发现，可以给蓝色元素一个负的margin-top样式属性值，让蓝色的块再往上移一半的距离，所以必须让要垂直居中的蓝色元素的高度固定，才能

知道margin-top的属性值是多少。

#div2{
    position: absolute;
    top: 50%;
    height: 400px;
    margin-top: -200px
}