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.

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

    附带：大家有什么居中的黑科技，欢迎留言，有赏哦！！