【修真院小课堂】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.编码实战