css中有哪些方法可以实现垂直居中

分享人:曾健

1、单行文本垂直居中方法

该方式适用于情况比较简单的单行文本,只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

2、多行文本垂直居中方法

2.1父级元素display:table-cell,vertical-align:middle;

2.2多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top ;

3、DIV垂直居中:INLINE-BLOCK

给元素设置dispaly:inline-block配合vertical-align:middle来垂直居中

4、DIV垂直居中:绝对定位之MARGIN:AUTO

说明: 父元素相对定位,子元素绝对定位。 子元素的上下左右均设置0定位且设置margin:auto

5、DIV垂直居中:绝对定位之TRANSLATE

说明: CSS3的兴起,使得垂直居中有了更好的解决方法,就是使用transform. transform中translate偏移的百分比值是相对于自身大小的

6、DIV垂直居中:FLEX

说明: 给父元素设置display:flex后再设置align-items: center表示让子元素垂直居中;