不定高垂直居中的三种方法

不定高垂直居中(核心代码)

1.display:table-cell + vertical-align:middle
在这里插入图片描述
父元素(.parent)设置display:table-cell 变成单元格,再设置vertical-align:middle (改属性可以作用于inline inline-block table何table-cell 元素)
该布局的优缺点:
优点:兼容性比较好(虽然table-cell不支持IE6 7 但把结构改成table结构就兼容了)。
缺点:未知。

2.sbsolute + transform
在这里插入图片描述

父元素设置position:relative 可使它做为参照物,子元素设置position:absolute top:50%,会使子元素向下多移动盒子的高度一半,再设置transform:translateY(-50%)看使盒子向上移动盒子的高度一半(transform:translateY(-50%)的百分比参照物是自己)。
该布局的优缺点:
优点:absolute脱离文档流,不会影响到其他子元素。
缺点:transform属于css3的内容,不支持IE6 7 8 版本,还要给不同浏览器加上不同前缀。

3.display:flex + align-items:center

在这里插入图片描述
当只给父元素设置display:flex 时 就会变成如上图, 因当父元素设置了这值时,items的align-items值默认是stretch(被拉伸适应容器),当设置值为center,就如下图(我们正需要的垂直居中)。
在这里插入图片描述
该布局的优缺点:
优点: 只要在父元素上设置就行。
缺点:只支持高版本的浏览器。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值