margin: 0 auto; 元素水平居中布局無效
阿新 • • 發佈：2018-03-17
定位 有時 net IT 導致 2個 tail tom for
失效原因：
- 要給居中的元素一個寬度，否則無效。
- 該元素一定不能浮動或絕對定位，否則無效。
- 在HTML中使用
<center></center>標簽，需考慮好整體構架，否者全部元素都會居中的。- 有時需要給父級元素添加text-align: center;
- 有時可能涉及到
<!DOCTYPE>類型相關定義。
當元素 float 後元素身上發生了什麽：
- 脫離當前的文檔流，變換到容器的邊緣，或是另一個浮動box的邊緣，若空間不夠則向下移動直到可以放下（margin的值是auto或不指定在渲染時會被當做0處理）
- 文檔流中的line box, inline box將圍繞float box
- float box若不設寬度將是它實際內容的寬度
- 把box都變成block-level box，形成一個新的block formatting context
- top/left/right/bottom, z-index無效
濫用float會導致各種bug，諸如：Incorrect Float Shrink-Wrap Bug、Float Squeeze Weird Gap Bug、Float Squeeze Duplicate Last Character Bug、Image Float Bullet Chaos Bug、Staircase Bug、Double Margin Bug、Italics Float Bug、3px Jog Bug、Scared of Floats Bug、Escaping Floats Bug、IE6 Peekaboo Bug……等等。所以在實際使用中有個原則，盡量不同時用2個或以上的float（比如可以用inline-block替代float）
轉自 http://blog.csdn.net/Dong_PT/article/details/51239526
margin: 0 auto; 元素水平居中布局無效