CSS 实现DIV水平垂直居中(二)

CSS 实现DIV垂直居中

上期介绍了CSS实现div水平居中的五种方法，下面介绍CSS实现div垂直居中的几种方法。上篇:CSS 实现DIV水平居中
首先还是和上期同样的两个div盒子，以下方法实现div垂直居中，效果如图：

1.通过padding上下留白实现视觉效果上的垂直居中。代码如下：

#d1 {
    width: 500px;
    padding: 100px 0;
    background-color: blanchedalmond;
    }
#d2 {
    width: 200px;
    height: 100px;
    background-color: aqua;
    }

2.通过position定位实现div垂直居中。代码如下：

#d1 {
    width: 500px;
    height: 350px;
    background-color: blanchedalmond;
    position: relative;
    }
#d2 {
    width: 200px;
    height: 100px;
    background-color: aqua;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
    }

这里的transform同样可以使用margin-top,思路和水平居中是一样的，详解可以看上一篇。

3.通过添加span标签实现div居中对齐。代码如下:

#d1 {
    width: 500px;
    height: 350px;
    background-color: blanchedalmond;
    }
#d2 {
    width: 200px;
    height: 100px;
    background-color: aqua;
    display: inline-block;
    vertical-align: middle;
    }
#d1 span{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    }

这里呢我们首先在d1中添加一个空的span标签，设置高度100%，再将d2和这个空的span设置为inline-block,最后利用vertical-align: middle使其垂直居中。

4.通过flex弹性布局实现div垂直居中。代码如下:

#d1 {
    width: 500px;
    height: 350px;
    background-color: blanchedalmond;
    display: flex;
    align-items: center;
    }
#d2 {
    width: 200px;
    height: 100px;
    background-color: aqua;
    }

这里和上一篇的通过flex弹性布局实现div垂直居中的思路是一样的,当我们没有对主轴进行设置时，使用 align-items对垂直方向进行设置。

5.通过定位实现div垂直居中。代码如下:

#d1 {
    width: 500px;
    height: 350px;
    background-color: blanchedalmond;
    position: relative;
    }
#d2 {
    width: 200px;
    height: 100px;
    background-color: aqua;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    }

这里我们在同时设置 top: 0; bottom: 0;时，利用 margin: auto;自动分配d2外边距，使d2垂直居中。

0;
margin: auto;
}

这里我们在同时设置`top: 0` `bottom: 0;`时，利用`margin: auto;`自动分配d2外边距，使d2垂直居中。