手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

盒子水平垂直居中的几种方法

时间:2024-10-12 10:56:16

1、使用css中的盒子定位来实现,但是这种方法需要知道盒子的具体宽高才可以。

盒子水平垂直居中的几种方法

2、还是使用css中的铜择珏觑盒子定位来实现,但是这种方法值得高兴地是,不需要知道盒子的具体宽高就能实现,是不是很兴奋^_^,兴奋之余,我还是要告诉童鞋们,这种方法不兼容低版本的IE浏览器呢(o_o)

盒子水平垂直居中的几种方法

3、css就是这么强大!使用css3的伸缩盒模型,不需要知道盒子的具体宽高就可以实现,不过忧伤的是,这种方法不兼容!不兼容!不兼容!~~~

盒子水平垂直居中的几种方法

4、上面介绍了这么多,很多童鞋看后可能要骂大街了吧,因为都满足不了你的需求似不似,不要着急,不要着急,重头戏都是放在最后的,耐心等待~,下面就给大家介绍!!!那就是通过JS,就是这么强大!

5、使用JS的思路大概给大家说下:1、js中只要获取到当前盒子具体的left/top值即可2、一屏幕的宽高-盒子的宽高,最后除以2,获取的值就是它应该具备的left/top(这个值可以使盒子处于页面中间)看起来是不是不难,下面童鞋期待的来了~请认真看图!

盒子水平垂直居中的几种方法
盒子水平垂直居中的几种方法

6、好了,老身就给童鞋们介绍这么多了,希望可以帮到你们!

© 手抄报圈