CSS中有哪些方法可以实现垂直居中（二）？

这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能，本篇分享的是：CSS中有哪些方法可以实现垂直居中（二）

 

大家好，我是IT修真院一枚正直纯洁善良的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.参考文献

参考一：利用writing-mode实现元素的垂直居中

参考二：CSS 水平居中，垂直居中

---

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~