【修真院小课堂】css中有哪些方法可以实现垂直居中？

大家好，我是IT修真院武汉分院学员曾健，一枚正直纯洁善良的WEB程序员
今天给大家分享一下，修真院官网前端任务8，深度思考中的知识点——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

给元素设置display：inline-block配合vertical-align：middle来居中。

4.div垂直居中：绝对定位之margin：auto

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

5.div垂直居中：绝对定位之trastranslate

css3的兴起。使得垂直居中有了更好的解决办法，就是使用transform。transform中translate偏移的百分比

值是相对于自身大小的

6：div垂直居中：flex

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

5.编码实战

6.拓展思考

使用writing-mode实现垂直居中

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

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

                    

7.参考文献

1.盘点8种css实现垂直居中水平居中的绝对定位居中技术

2.纯css实现垂直居中的几种方法

3.改变css世界纵横规则的writing-mode属性

8.更多讨论

问：还有更多实现垂直居中的方法吗？

答：display：inline-block，通过：after来占位，代码如下

问：怎么实现水平居中？

答：使用margin：auto来实现，该方法需要指定宽度

      使用text-align和inline-block实现

      使用绝对定位实现

问：怎么实现垂直水平居中？

答：使用display：inline-block，text-align，vertical-align实现

利用绝对定位实现

利用flex实现

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

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

                                         快来与我一起学习吧~http://www.jnshu.com/login/1/20654713