css内水平居中和垂直居中问题总结

一、水平1





最简单估计也是较常用的方法就是用margin：0 auto；居中，不需要ab re等设置。

二、水平2





通过position将box处于可控的范围内，然后通过left移动50%父元素宽，再通过margin的负值移回半个元素的宽度即可。

三、



设置绝对值的方法很sb，限制也较大，步骤也比较繁琐，我就不提了。。。

四、垂直居中1



此方法类同于方法二，只是将中心移回中点的方法是通过-webkit-transform: translate(-50%,-50%);的方法移动

五、垂直居中2



网上的所谓的”绝对居中“的方法，通过设置top,left,right,bottom4个方向的值均为0，来达到居中目的。兼容性强，但前提是需将margin设为auto，并且设置position。

六、垂直居中3



此方法利用了vertical-align: middle可以作用于table-cell元素的特性，利用此点做到垂直居中（不能水平居中）。但需要设置三层才能将最内层的div设置为居中，较为复杂。

七、垂直对齐4



此方法同方法6，总结而来此方法需要三层嵌套，最外层display:table，中层display:table-cell，vertical-align:middle，最内层即可。

八、垂直对齐5





此方法基本不懂啊，，，对于伪元素after及before的应用没有掌握，，content: '';这一句也不懂什么意思，主要的原因应该是通过display: inline-block;vertical-align: middle;的配合使用，网上解释vertical-align: middle;只能作用于inline-block和table-cell。

九、垂直对齐6



所谓的flex高级语法。。。应该是一种比较新的css规则，靠到时候差手册了，嵌套也比较简单，代码也比较简单，只需要根据兼容性需求添加各种浏览器的相应代码即可。