关于常用的垂直居中

最近做页面经常用到垂直居中，而且有些是不定高，在这里总结一下垂直居中用到的技巧。

 

对于盒子垂直居中：

    第一种方法：先让盒子top和left的位置移动50%（要先设置position），然后利用margin的负值将盒子拉到中间。

    第二种方法：flex布局，使用align-items垂直居中，缺点是在pc兼容性不太好。（也可以使用Grid布局，但我很少用）

    第三种方法：参照第一种方法，先让盒子top和left的位置移动50%，然后使用translate(-50%,-50%)将盒子移到中间（对于不知道宽高的盒子居中很好用）。

 

对于文字在盒子中垂直居中：

    第一种方法：使用line-height，简单粗暴；

    第二种方法：flex布局，同上；

    第三种方法：在已知盒子高度情况下，可以使用padding，使文字在视觉上垂直居中。

 

对于文字和icon图标对齐问题，或者表单对齐问题：

代码来源于：https://www.zhangxinxu.com/wordpress/2016/03/css-layout-base-20px/

原理：

.icon { 
    display: inline-block; 
    width:20px; height:20px; 
    background: ...; 
    white-space:nowrap; 
    letter-spacing: -1em; 
    text-indent: -99em; 
    color: transparent;
    /* IE7 */
    *text-indent: 0;
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000');
}
.icon:before {
    /* 伪元素插入空格文本 */
    content: '\3000'; 
}

未完待续。。。（下次更新：BFC概念）