CSS有哪些方式可以实现垂直居中(方法大总结)

这里是修真院前端小课堂,每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能,本篇分享的是:

【CSS有哪些方式可以实现垂直居中(方法大总结)】

1.背景介绍

44年前我们把人送上月球,但在CSS中我们仍然不能很好的实现垂直居中。——@James Anderson

2.知识剖析

垂直居中就是竖向居中

接下来就讲解在css中实现垂直居中的几种方法:

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

说明:

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

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

说明:

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

2.2使用table来布局;

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

3、div垂直居中:table

说明:

在table标签中,单元格框中的单元格内容是水平垂直居中的。

display:table此元素会作为块级表格来显示 类似table标签

display:table-cell 此元素会作为一个表格单元格显示 类似td 和 th标签

4、div垂直居中:inline-block

说明:

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

5、div垂直居中:绝对定位之margin:auto

说明:

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

6、div垂直居中:绝对定位之负值法

说明:

已知元素高度后,使用绝对定位将top设置为50%,mergin-top设置为内容高度的一半(height + padding) / 2的负值;内容超过元素高度时需要设置overflow决定滚动条的出现;top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;

 

7、div垂直居中:绝对定位之translate

说明:

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

8、div垂直居中:flex

说明:

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

 

3.常见问题

怎样实现背景图片垂直居中?

4.解决方案

父元素{

background-image: url("");

background-position: center center; //或者写成50% 50%;

background-repeat: no-repeat;

}

5.编码实战

6.扩展思考

使用writing-mode实现垂直居中

取值:

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

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

7.参考文献

参考:张鑫旭博客-垂直居中

8.更多讨论

还有更多实现垂直居中的方法吗?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值