经典CSS坑:如何完美实现垂直水平居中?
经典CSS坑:如何完美实现垂直水平居中?
踩了各种坑之后总结出的方法,开门见山,直接上代码和效果图。希望对读者有所帮助,后续如果有更好的方法,我也会持续更新
第一种方法:transform(个人认为最完美的居中定位方法)推荐度:❤❤❤❤❤
2.
第二种方法:flex(响应式布局的最好方法)推荐度:❤❤❤❤❤
3.
第三种方法:定位+自适应margin方法 推荐度:❤❤❤❤
4.
第四种方法:text-align + transform(可以实现效果,但是text-align不符合语义化)推荐程度:❤❤❤
5.
第五种方法:text-align(本质上只是文字居中显示)推荐程度:❤❤
6.
第六种方法:margin(需要设置width,不能自适应)推荐程度:❤❤
7.
第七种方法:vertical-align(本质上是表格元素垂直方向居中显示)推荐程度:❤❤
8.
第八种方法:line-height(行高)推荐程度:❤