大家好，我是IT修真院北京总院第22期的学员，一枚正直纯洁善良的web程序员；
今天给大家分享一下，修真院官网css8任务2，深度思考中的知识点——css有哪些方式可以实现垂直居中？
一、背景介绍
垂直居中在前端开发过程中，盒子居中是常常用到的。其中 ，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。
二、知识剖析
垂直居中就是竖向居中
下面我们一起来讨论一下实现垂直居中的方法。
三、常见问题
css有哪些方式可以实现垂直居中
四、解决方案
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、DIV垂直居中：MARGIN：AUTO
父元素相对定位，子元素绝对定位。 子元素的上下左右均设置0定位且设置margin：auto
5、DIV垂直居中：CSS3的transform
CSS3的兴起，使得垂直居中有了更好的解决方法，就是使用transform代替上一种方法margin. transform中translate偏移的百分比值是相对于自身大小的
6、DIV垂直居中：flex
给父元素设置display：flex后再设置align-items: center表示让子元素垂直居中
五、编码实战
六、拓展思考
还有什么特殊的方法可以实现垂直居中
使用writing-mode实现垂直居中
writing-mode是CSS3的新特性之一，使用场景不是很多。这个属性主要是改变文档流的显示方式。
七、参考文献
参考一：
利用writing-mode实现元素的垂直居中
参考二：
CSS水平居中，垂直居中
更多讨论
问题一：transform:translateY(-50%);向上移动自身高度的50%，可以使用margin吗？
回答：可以使用margin-top根据父级元素调节，当div高度变化时，div的中心会移动，要重新调整margin-top;
问题二：transform的兼容问题？
回答：浏览器支持情况：
IEFirefoxChromeSafariOpera
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
问题三：vertical-align的属性值可以用PX单位吗？
回答：vertical-align的数值百分比类型的值，数值的含义：在baseline对齐基础上上下偏移对应的数值大小，比如值为1px就是在默认（baseline）基础上上移1像素，1em就是上移一个字体大小。
然而对于百分比来说，它是相对于line-height来计算的。
比如指定line-height：30px；vertical-align：-10%；那么实际上vertical-align的值就是-3px，也就是在基线对齐的基础上，下移3px。
8：鸣谢
感谢观看
感谢 伊文秋，此教程在她技术分享的基础上完善而成！
视屏地址：https://v.qq.com/x/page/e0511nhq09c.html
------------------------------------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论