css垂直水平居中大法

1.在设计中居中是形成美的第一大元素,然而在前端编写如何实现垂直水平居中呢?

1.普通青年(margin赋值法)


     如果知道了各个元素的大小,设置等于宽高一半大小的负margin值,再配合top: 50%; left: 50%;样式就会使块元素居中就可以实现。



代码效果图


      代码:


代码

     好处:浏览器兼容性非常好,甚至支持IE6-7,这也是在定宽定高时常用的办法,需要的编码量很少。

     延伸:需要垂直水平居中的盒子也可以设置成百分比,margin-left和margin-top只要按照长宽百分比/2就好了。

2.中二青年(transform法)


     和“margin”法的好处一样,简单有效,同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。.

     代码:


代码

     好处:内容高度可变,代码量小。

     缺点:不支持IE8,需要写厂商前缀,会和其他transform样式有冲突,某些情况下的边缘和字体渲染会有问题。

3.小清新(0000法)


     小清新,一定要占据美貌和青春,那一定飞0000莫属啦。

      代码:


000法

     好处:0000有没有很清新范,妹纸一定很喜欢,有没有怀念起当年想考0分的岁月,内容高度可变,代码量小。

4.文艺青年(table-cell法)


     这是一种文艺青年的时尚做法,因为高度可以随内容改变,浏览器支持也不差,体现与普通青年不一样的逼格。

     代码:


代码

      好处:内容高度可变,内容溢出则能自动撑开父元素高度,浏览器兼容性好。

5.潮流青年 (Flexbox法)


     CSS未来发展的方向就是采用Flexbox,这是一种潮流,也是一种趋势,是潮流青年解决这种问题的不二之举。前方高能,Flexbox有不止一

种办法居中,他也可以用来分栏,并解决奇奇怪怪的布局问题,是潮流青年的不二之举。

      代码:


代码

   好处:符合时代潮流酷炫,内容可以是任意高宽,溢出也能表现良好,可以用于各种高级布局技巧,惊呆你的双眼。想深入了解给你潮流青年

   链接:Flex 布局教程:语法篇 - 阮一峰的网络日志CSS box-flex属性,然后弹性盒子模型简介 «  张鑫旭-鑫空间-鑫生活

   缺点:不支持IE8-9,需要额外容器,需要各种厂商前缀兼容现代浏览器,可能有潜在的性能和兼容问题问题。

6.脑洞青年(inline-block法)


    没有宽高的盒子怎么水平居中呢,这就需要脑洞青年登场了。前方高能前方高能!!!!!!!

    效果:


效果

     代码:


代码

    好处:脑洞青年专属,浏览器支持很不错,其实也是很流行的方法,可以解决一些特殊的需求。

7.


    以上居中方法已经差不多介绍完了,大家是什么样的青年呢?

    附带:大家有什么居中的黑科技,欢迎留言,有赏哦!!