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.
以上居中方法已经差不多介绍完了，大家是什么样的青年呢？
附带：大家有什么居中的黑科技，欢迎留言，有赏哦！！
网友评论