View on GitHub

Yinjie - GitHub.io

Welcome to the Yinjie's notes

简单的垂直居中方法

居中的问题大家肯定都遇到过，水平居中不再话下，垂直居中的场景也有很多地方要用，但可就不像水平居中那么简单了。
下面提供两种靠谱的垂直居中方法。

display: table 方式

将窗口的模式改成 table, 居中元素的显示模式改成 table-cell，利用表格的居中特性进行垂直居中，但不支持IE8-的浏览器。

.center-box {
    display: table;
}
.center-item {
    display: table-cell;
    vertical-align: middel;
}

幽灵元素法

通过一个 ::defore 的幽灵元素将父容器“看成”是一个单行的 inline 元素，然后用 vertical-align: middle 使所有元素居中。

.center-box {
  position: relative;
}
.center-box::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.center-box > .center-item{
  display: inline-block;
  vertical-align: middle;
}

flex 布局法

很优雅的方法，只用定义容器的属性，即可实现一个或多个子元素的居中，但有一定的兼容性，可以在移动端用。

.center-box-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

transform 方法

依靠 translate 百分比的参照是自己本身这个特性，在老的 position: absolute; 上加以改进，就做到响应式居中了。

.center-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}