用CSS如何实现垂直居中

大家好，我是IT修真院北京总院第24期的学员，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网css任务8，深度思考中的知识点——用CSS如何实现垂直居中?

1.背景介绍

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

2.知识剖析

垂直居中就是竖向居中

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

3.常见问题

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

4.解决方案

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

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

2、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们可以使用设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把div完全填充的一种方式而已。

3、多行文本固定高度的居中

vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟table，所以我们可以使用这个属性来让div模拟table就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个div元素.

4、IE6中垂直居中

Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此我们可以使用定位来解决这个问题。

5、DIV垂直居中：MARGIN：AUTO

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

6、DIV垂直居中：CSS3的transform

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

7、DIV垂直居中：flex

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

8、使用writing-mode实现垂直居中

writing-mode是CSS3的新特性之一，使用场景不是很多。这个属性主要是改变文档流的显示方式。

5.编码实战

_腾讯视频

6.扩展思考

7.参考文献

参考一：利用writing-mode实现元素的垂直居中

参考二：CSS 水平居中，垂直居中

---

ppt链接：ppt

视频链接：视频

---

感谢大家观看

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

---

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请码：12361358，或者你可以直接点击此链接：http://www.jnshu.com/login/1/12361358