这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【用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.参考文献
参考二：CSS 水平居中，垂直居中
ppt链接：ppt
视频链接：视频
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请码：12361358，或者你可以直接点击此链接：http://www.jnshu.com/login/1/12361358
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地