踩了各种坑之后总结出的方法，开门见山，直接上代码和效果图。
第一种方法：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
>努力成为优秀前端工程师！
