各种元素居中方法,掌握即可无惧所有元素居中

已经大小的元素在浏览器可视窗口中水平垂直居中

根据固定定位(fixed)的特性,固定定位的参考对象是浏览器的窗口,因此left和top各设置50%,并且left和top再往回移动已知元素大小的一半即可。
代码如下:
在这里插入图片描述
结果如下:
在这里插入图片描述

未知大小的元素在浏览器可视窗口中水平垂直居中

由于元素大小未知,根据固定定位的特性,将元素距离上右下左的距离设为0,然后再设置margin为auto(自适应)即可。
代码如下:
在这里插入图片描述
结果如下:
在这里插入图片描述

已知大小的元素在父元素中水平垂直居中方法

此种情况跟前面已知大小元素在可视窗口居中的方法差不多,但值得注意的是,由于子元素div设置了绝对定位,其父元素一定要设置相对定位(父相子绝),这样元素的参考对象就改为该元素的父元素了。
代码如下:
在这里插入图片描述
结果如下:
在这里插入图片描述

未知大小的元素在父元素中水平垂直居中方法一

由于元素大小是未知的,所以我们需要一个span来设置参考线,span里面千万不能放任何内容,
然后我们只要将这个参考线height设置为100%,然后让未知大小元素参照span居中即可。
代码如下:
在这里插入图片描述
结果如下:
在这里插入图片描述

未知大小的元素在父元素中水平垂直居中方法二

将父元素转换为table-cell,然后进行垂直居中即可。
注:
1.不要与float:left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin设置无效,响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display:table-cell使用百分比设置宽度和高度

代码如下:
在这里插入图片描述
结果如下:
在这里插入图片描述






**以上是小白我对元素居中的一些总结,望能够对你们有用处!**
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值