經典CSS坑：如何完美實現垂直水平居中？

經典CSS坑：如何完美實現垂直水平居中？

踩了各類坑以後總結出的方法，開門見山，直接上代碼和效果圖。但願對讀者有所幫助，後續若是有更好的方法，我也會持續更新

1. 第一種方法：transform（我的認爲最完美的居中定位方法）推薦度：❤❤❤❤❤

2.

第二種方法：flex（響應式佈局的最好方法）推薦度：❤❤❤❤❤

3.

第三種方法：定位+自適應margin方法 推薦度：❤❤❤❤

4.

第四種方法：text-align + transform（能夠實現效果，可是text-align不符合語義化）推薦程度：❤❤❤

5.

第五種方法：text-align（本質上只是文字居中顯示）推薦程度：❤❤

6.

第六種方法：margin（須要設置width，不能自適應）推薦程度：❤❤

7.

第七種方法：vertical-align（本質上是表格元素垂直方向居中顯示）推薦程度：❤❤

8.

第八種方法：line-height（行高）推薦程度：❤