為要居中元素的父元素應用text-align:center，為要居中的元素設定display:inline-block.這樣設定就可以得到我們想要的結果
在一個元素內居中另一個元素有時候會很困難.對於常規，靜態定位的元素，可以讓他向左或向右浮動，或者使用text-align屬性讓他在父元素內居左，居中或居右.還可以利用自動外邊距(margin:0 auto;)來居中元素.這些方法的問題在於，要居中的元素必須是有寬度的.像這裡用於構成菜單的Html列表，他可能是根據數據庫信息動態生成的，或者說將來有可能手工編輯，總之你不可能提前設定他的寬度.
在display屬性的值中，inline-block具有一些特殊的混合行為.正如他的名字所暗示的，它具有塊級元素的特點，也有行內元素的行為.從塊級元素角度來說，可以為他設定外邊距和內邊距，也可以通過它簡便而有效的包圍其他塊級元素.從行內元素角度看，他會收縮包裹自己的內容，而不是擴展填充父元素.換句話說，inline-block元素的寬度始終等於其內容寬度.這種元素還有一個特點，就是可以包圍浮動元素.不過，這種元素也有一個問題，既不能給他的外邊距設定auto值--而這恰恰又是在更大的容器內居中元素的最簡單方法.
解決方案就是為要居中元素的父元素應用text-align:center，為要居中的元素設定display:inline-block.這樣設定就可以得到我們想要的結果:沒有寬度的元素也能在其父元素內居中.