html中div里的怎样上下居中,div+css 怎么让一个小div在另一个大div里面 垂直居中...

方法一、小div绝对定位或相对定位,这样小div脱离标准流,大div有固定宽高,用小div的margin去挤大div

Title

注意:如果小div没有绝对定位或相对定位,且大div没有border,那么小div的margin实际上踹的是“流”,踹的是这“行”。如果用margin-top,大div整体也掉下来了。如下:

41c0ee28c2945fc51df3d15c70146c0b.png

方法二、如果给大div加一个border,使大div,小div都不定位,用小div的margin去挤大div,实现小div居中。

Title

显示结果如下:

41a2e690a32b70ffbeedc6afaaf1654c.png

方法三、小div绝对定位,大div相对定位,定位到大盒子的宽高一半的位置,再上下各margin负的自己宽高的一半

Title

显示结果如下:

ed4ec4328fc5d0c7ffa3e87d6e76759f.png

扩展资料:

一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。工程上,“子绝父相”有意义,父亲元素没有脱标,儿子元素脱标在父亲元素的范围里面移动。

绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。

display:inline和display:inline-block,会使margin:0 auto;失效。

固定宽度的盒子才能使用margin:0 auto;居中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值