剛剛學習CSS的時候，經常需要用到塊元素居中，於是乎度娘、google一番，當然查專業資料建議用google，題外話！學會了給塊元素設置個width，然后給margin特性設為0 auto，如此塊元素便繳槍投降，乖乖居中了。
那是為什么呢？這中間的原理和實現過程是如何呢？夜深了，待我喝杯咖啡，慢慢說來！
上一篇文章談到了盒子模式，這個居中的原理也用到了盒子模式的知識點。塊元素的水平方向有七個寬度屬性：①、左外邊距，②、左邊框，③左內邊距，④元素寬度（width），⑤右內邊距，⑥右邊框，⑦右外邊距。，正常文檔流中，七大屬性排排坐，寬度剛好是元素包含塊的寬度，也是父元素的width（內容寬度），一般情況下，塊元素的父元素也是塊元素。
但是，七個屬性中有四個（左右內邊距、左右邊框），不能設為auto，寬度默認為0；另外三個屬性（width、左右外邊距）可以設為auto，也就是說，另外三個的寬度之和要等於包含塊的寬度。這里舉個例子：包含塊的寬度為600px， 當三個屬性都未固定值時，可能出現不等於包含塊寬度的情況，此時瀏覽器會強制將右外邊距設為auto（根據文字的閱讀方向，從左至右，后面的設為auto），右外邊距的寬度就等於600 — width — margin-left；若兩個外邊距設為auto，則平分剩余寬度。這個時候說到重點了，用具體數據來說明吧！當width=200px，左右邊距平方600-200=400px;左右邊距都是200px，自然居中了。
有時間的愛好者，可以練練手，試試將左外邊距設為固定值，另外兩個設為auto，會出現什么情況？(答案是右外邊距會被設置為0，width會完全填充剩余的包含塊)同樣，三個屬性都設為auto的情況下，外邊距都會被設為0，width獨占其身。這種情況，跟默認的情況一樣的結果，即沒有外邊距，width默認為auto。由於時間原因，現在還在公司，得趕着回家，不做測試了！有錯誤的地方請指出，謝謝！
另外，傳一張行內元素布局的基本概念圖：
