关于 CSS 中的垂直居中

table 方式：

.parent {
    display: table-cell;
    vertical-align: middle;
}
.child {
    margin: auto;
}

 

translate + 绝对定位:

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

 

绝对定位+四个方向置0

.parent{
    width: 200px;
    height: 200px;
    position: relative;
}
.child{
    width: 100px;
    height: 100px;
    margin: auto;  
    position: absolute;  
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

 

 ::after + inline-block :

.parent{
    /***/
}
.parent::after{
    content: '';
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

 

flex 布局

.parent {
    display: flex;
    align-items: center;
}
.child {
    /**/
}

 

---- 移动端 文字在容器内垂直居中  安卓 line-height 不居中----

传统写法是 令 line-height 与 height 相等即可，但是在安卓浏览器里文字会偏上，无法居中。原因大致是 Android 对文字的渲染高度不同。我们可以采取 flex 的方式来解决

display: flex;
align-items: center;

 或者用2倍字体，然后缩小一半。

待续。。。