CSS实现垂直居中的七个方法实例代码详解

我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题,但一直以来最麻烦对齐问题,都是“垂直居中”这个讨人厌的设定,以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法 设定行高(line-height) 添加伪元素 calc动态计算 使用表格或假装表格 transform 绝对定位 使用Flexbox 设定行高(line-height) 设定行高是垂直居中最简单的方式,适用于“单行”的“行