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

大家好，我是IT修真院武汉分院学员曾健，一枚正直纯洁善良的WEB程序员
今天给大家分享一下，修真院官网前端任务8，深度思考中的知识点--css中有哪些方法可以实现垂直居中？
1.背景介绍
在前端开发过程中，盒子居中是常常用到的。其中，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素
的边距：0 auto 就可以实现。但是垂直居中相对来说是比较复杂一些的。

2.知识剖析
垂直居中就是竖直居中，下面让我们一起来讨论一下垂直居中的方法。

3.常见问题
CSS有哪些方法可以实现垂直水平居中？

4.解决方案
1.单行文本垂直居中的方法

该方法适用于情况比较简单的单行文本，只需要简单的把行高设置为那个对象的高度值

就可以使文本居中了。

2.多行文本的垂直居中方法

2.1给父级元素设置属性显示：表小区和垂直对齐：中间。

2.2多行内容居中，且容器高度可变。也很简单，给出一致的填充底部填充和顶部。

3.div垂直居中：直列块

给元素设置显示：内联块配合垂直对齐：中间来居中。

4.div垂直居中：绝对定位之缘：汽车

。父元素相对定位，子元素绝对定位子元素上下左右均设置为0，并且设置保证金：汽车。

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

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

值是相对于自身大小的

6：格垂直居中：弯曲

 给父元素设置显示：弯曲，后在设置对齐项：中心表示让子元素垂直居中。

5.编码实战
6.拓展思考
使用书写模式实现垂直居中

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

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

                    

7.参考文献
1.盘点8种的CSS实现垂直居中水平居中的绝对定位居中技术

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

3.改变CSS世界纵横规则的写作模式属性

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

答：显示：内联块，通过：后来占位，代码如下

问：怎么实现水平居中？

答：使用保证金：汽车来实现，该方法需要指定宽度

      使用文本对齐和inline-block的实现

      使用绝对定位实现

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

答：使用显示：内联块，文本对齐，垂直对齐实现

利用绝对定位实现

利用柔性实现