垂直居中实现方法

Question

1、已知宽高元素的水平垂直居中

绝对定位与负边距实现。利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。代码如下：

#container {
    position:relative;
}
 
#div {
    position:absolute;
    width: x;
    height: y;
    top: 50%;
    left: 50%;
    margin: -x / 2 0 0 -y / 2;
}

2、未知宽高元素的水平垂直居中

2.1 方法一

也是利用绝对定位与 margin。代码如下：

#container {
    position:relative;
}

#div {
    position: absolute;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

2.2 方法二

当要被居中的元素是内联元素的时候，可以巧妙的将父级容器设置为 display:table-cell，配合 text-align:center 和 vertical-align:middle 即可以实现水平垂直居中。代码如下：

#container {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

2.3 方法三

利用 Css3 的 transform，可以轻松的在未知元素的宽高的情况下实现元素的垂直居中。代码如下：

#container {
    position:relative;
}
 
#div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2.4 方法四

使用 flex 布局，无需绝对定位等改变布局的操作，可以轻松实现元素的水平垂直居中。代码如下：

#container {
    display:flex;
    justify-content:center;
    align-items: center;
}