盒子水平垂直居中的几种方法 _小知识

对于初入前端的童鞋们来说，是不是经常被盒子若何程度垂直居中所困扰呢？下面我就介绍几种方式，但愿可以帮到你哦~
方式/
1利用css中的盒子定位来实现，可是这种方式需要知道盒子的具体宽高才可以。

文章插图

2仍是利用css中的盒子定位来实现，可是这种方式值得欢快地是，不需要知道盒子的具体宽高就能实现，是不是很兴奋^_^ ，兴奋之余，我仍是要告诉童鞋们，这种方式不兼容低版本的IE浏览器呢(o_o)

文章插图

3css就是这么壮大！利用css3的伸缩盒模子，不需要知道盒子的具体宽高就可以实现，不外忧伤的是，这种方式不兼容！不兼容！不兼容！~~~

文章插图

4上面介绍了这么多，良多童鞋看后可能要骂大街了吧，因为都知足不了你的需求似不似，不要焦急，不要焦急，重头戏都是放在最后的，耐烦期待~ ，下面就给大师介绍！！！那就是经由过程JS ，就是这么壮大！

5利用JS的思绪大要给大师说下：
1、js中只要获取到当前盒子具体的left/top值即可
2、一屏幕的宽高-盒子的宽高，最后除以2 ，获取的值就是它应该具备的left/top(这个值可以使盒子处于页面中心)
看起来是不是不难，下面童鞋等候的来了~请当真看图！

文章插图

文章插图

6【盒子水平垂直居中的几种方法】好了，老身就给童鞋们介绍这么多了，但愿可以帮到你们！

注重事项利用js这个体例，记得给盒子设置position: absolute; ，要否则不会呈现你想要的成果
若是你做的是手机端，利用css3的伸缩盒模子仍是可以呢
利用css3的伸缩盒模子，需要给body和html设置height:100%,不要健忘了

以上内容就是盒子水平垂直居中的几种方法的内容啦，希望对你有所帮助哦！