CSS有哪些方式可以实现垂直居中

大家好，我是IT修真院深圳分院第02期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网css任务08，深度思考中的知识点——CSS有哪些方式可以实现垂直居中？

1.背景介绍

在前端开发过程中，盒子居中是常常用到的。其中 ，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。

2.知识剖析

垂直居中就是竖向居中

下面我们一起来讨论一下实现垂直居中的方法。

3.常见问题

css有哪些方式可以实现垂直居中？

4.解决方案

1、单行文本垂直居中方法

该方式适用于情况比较简单的单行文本，只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

2、多行文本垂直居中方法

2.1父级元素display:table-cell，vertical-align:middle；

2.2多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top ；

3、DIV垂直居中：INLINE-BLOCK

给元素设置dispaly：inline-block配合vertical-align：middle来垂直居中

4、DIV垂直居中：绝对定位之MARGIN：AUTO

父元素相对定位，子元素绝对定位。 子元素的上下左右均设置0定位且设置margin：auto

5、DIV垂直居中：绝对定位之负值法

已知元素高度后，使用绝对定位将top设置为50%，margin-top设置为内容高度的一半(height + padding) / 2的负值；内容超过元素高度时需要设置overflow决定滚动条的出现；top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合；

6、DIV垂直居中：绝对定位之TRANSLATE

CSS3的兴起，使得垂直居中有了更好的解决方法，就是使用transform代替上一种方法margin. transform中translate偏移的百分比值是相对于自身大小的。

7、DIV垂直居中：FLEX

给父元素设置display：flex后再设置align-items: center表示让子元素垂直居中；

5.编码实战

6.扩展思考

使用writing-mode实现垂直居中

取值：

vertical-rl：垂直方向自右而左的书写方式。

vertical-lr：垂直方向自左而右的书写方式。

demo

7.参考文献

参考一：盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

参考二：纯CSS实现垂直居中的几种方法

参考三：改变CSS世界纵横规则的writing-mode属性

8.更多讨论

1.还有更多实现垂直居中的方法吗？

2.怎么实现水平居中？

3.怎么实现水平垂直居中？

9.视频资料

CSS有哪些方式可以实现垂直居中_腾讯视频

PPT

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

下期不见不散~