CSSmargin:auto踩坑

CSS 中的 margin 如果指定左右 auto 的话就能实现元素居中效果

闲着的时候做的一个书单

但是，auto居中效果前提是必须给该元素指定一个宽度才能生效。比如width:50%

给行内元素(inline)设置上下margin时，需要区分替换元素与非替换元素。对于行内非替换元素（如 <span>），即使在 CSS 中设置了上下 margin，页面上不会有任何效果，因为它们只支持左右的 margin，不支持上下的。但对于行内替换元素（如 <img>、<input> 等），它们虽然也是行内级元素，但是完全支持并会响应上下的 margin。

---

给margin的左右赋值auto后，如果该元素同时使用了 float 属性（不为 none），那么 margin-left 和 margin-right 的计算值会被浏览器重置为 0，因此水平居中效果就会失效。