经典CSS坑:如何完美实现垂直水平居中?

踩了各种坑之后总结出的方法,开门见山,直接上代码和效果图。

第一种方法:transform(个人认为最完美的居中定位方法)推荐度:❤❤

第二种方法:flex(响应式布局的最好方法)推荐度:❤❤

第三种方法:定位+自适应margin方法 推荐度:❤❤❤❤

中间的矩形垂直水平居中

第四种方法:text-align + transform(可以实现效果,但是text-align不符合语义化)推荐程度:❤❤❤

第五种方法:text-align(本质上只是文字居中显示)推荐程度:❤❤

第六种方法:margin(需要设置width,不能自适应)推荐程度:❤❤

第七种方法:vertical-align(本质上是表格元素垂直方向居中显示)推荐程度:❤❤

第八种方法:line-height(行高)推荐程度:❤

若是我发现更好的垂直居中,水平居中,垂直水平居中方法,会第一时间更新在这里!

大家若是有更好的方法,可以给我评论,我很有兴趣学习!

我们一起努力成为优秀的前端工程师!

才疏学浅,欢迎大家飞板砖!

希望这篇笔记对大家有用!

>期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

> - SegmentFault技术圈:[ES新规范语法糖](https://segmentfault.com/g/1570000010695363)

> - SegmentFault专栏:[趁你还年轻,做个优秀的前端工程师](https://segmentfault.com/blog/chennihainianqing)

>- 知乎专栏:[趁你还年轻,做个优秀的前端工程师](https://zhuanlan.zhihu.com/wyasy)

>- Github博客: [趁你还年轻233的个人博客](https://github.com/FrankKai/FrankKai.github.io)

>- 前端开发QQ群:660634678

>- 微信公众号: 人兽鬼 / excellent_developers

![](https://upload-images.jianshu.io/upload_images/2976869-157e8624bcdfd62a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>努力成为优秀前端工程师!

推荐阅读更多精彩内容