水平居中兼容性

1. 在现代浏览器中实现水平居中，可以使用 display: flex; justify-content: center;。
2. 不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。
3. margin: auto兼容性非常好，如果要兼容老式浏览器，一定要用。

   失效的几种情况

   1.没有设置width

   在没有设置宽度的情况下，盒子的大小是不确定的，没有办法计算居中的位置。

   2.不是块级元素

   margin:0 auto;只对块级元素起作用，所以在使用的时候，要注意设置的元素是否为块级元素，如果不是可以使用display: block;

   3.该元素设置了浮动属性

   对于浮动的元素，已经脱离了文档流，所以不生效

   4.该元素设置了绝对定位

   设置了position: absolute;元素也脱离了文档流，所以不生效