[前端學習筆記] div 水平置中

　今天練習 jQuery 的計畫被這個問題給搞亂了，因為用 "margin: 0 auto" 的設定不能順利的把 div 區塊水平置中，查了一下資料才發現 "margin: 0 auto" 有個出乎我意料的限制，就是必須要設定區塊的寬度！

　雖然我還沒查到原因，不過實作上如果要維持 div 區塊原本 "display: block;" 的設定，那就別無選擇的一定要加上寬度設定，不管是固定寬度（如 "width: 200px;"）還是動態寬度（如 "width: 50%;"）都可以，這樣就可以用 "margin: 0 auto;" 來把 div 區塊置中。

　如果要利用 "display: inline-block;" 來自動偵測內部元件的總寬度，進而把元件置中，那麼就必須要把 inline-block 的區塊當作文字來編排，也就是說，要在上層加入 "text-align: center;" 來把 inline-block 區塊置中。

　除此之外，也可以利用 table 或 flex 來做置中，不過這可能會造成附近排版的困難，所以要用 table 或 flex 的話，最好要把附近的排版情況也一起考慮進去。