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

对于初入前端的童鞋们来说,是不是经常被盒子若何程度垂直居中所困扰呢?下面我就介绍几种方式,但愿可以帮到你哦~

方式/步调

  1. 1

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

    bba1cd11728b47104af60f04cecec3fdfd032319.jpg
  2. 2

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

    9c16fdfaaf51f3de082144ac99eef01f3b297963.jpg
  3. 3

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

    c75c10385343fbf23fe45aebbd7eca8064388f2a.jpg
  4. 4

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

  5. 5

    利用JS的思绪大要给大师说下:

    1、js中只要获取到当前盒子具体的left/top值即可

    2、一屏幕的宽高-盒子的宽高,最后除以2,获取的值就是它应该具备的left/top(这个值可以使盒子处于页面中心)

    看起来是不是不难,下面童鞋等候的来了~请当真看图!

    b3b7d0a20cf431ad5128bdf14636acaf2fdd9804.jpg 83025aafa40f4bfbe121609c0e4f78f0f6361800.jpg
  6. 6

    好了,老身就给童鞋们介绍这么多了,但愿可以帮到你们!

    END

注重事项

  • 利用js这个体例,记得给盒子设置position: absolute;,要否则不会呈现你想要的成果
  • 若是你做的是手机端,利用css3的伸缩盒模子仍是可以呢
  • 利用css3的伸缩盒模子,需要给body和html设置height:100%,不要健忘了
  • 发表于 2019-02-13 20:00
  • 阅读 ( 1706 )
  • 分类:科学教育

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论