但是，有時候會發現這樣寫了也沒出效果。原因是什麼呢？ 請往下看。
水平居中：分為塊級元素居中和行元素居中
行內元素：
行內元素就是內聯元素。例如、、、、
等。。直接構建乙個具有 」text-align:center「樣式的容器，那麼裡面包含的行內元素就會都居中了。
xml/html code複製內容到剪貼簿
效果如圖：
有沒有程式設計客棧發現不對，塊級元素怎麼「看起來」也居中了？給
加上寬度後：
xml/html code複製內容到剪貼簿
效果如圖：
原來只是裡面的文字居中了!
那麼下面看塊級元素居中。大家都知道塊級元素是可以設定height和width的，那麼這就又
分為定寬與不定寬。
定寬：定寬其實很好解決。直接margin:0 auto就可以實現容器居中，再加上text-align:center才可以讓文字居中。
我是定寬塊級元素，我要居中p>
效果如圖：
不定寬：
不定寬其實是用的最多的，如這種導航欄：
因為導航欄中的內容是會變化的，所以寬度就不能定死了。要居中的話有三種方法，其中一種是利用table標籤的特性，感覺適用性不是很好就不介紹了。
1、直接把元素改為行內元素，既display:inline，然後就可以用text-align:center了。但是這樣width和height就不能設定了。
css：
css code複製內容到剪貼簿
body:
xml/html code複製內容到剪貼簿
效果下：
2、下面使用父級元素浮動和相對定位以及lelf:50%。子元素照樣設定但left:-50%。
整改後的css**：
css code複製內容到剪貼簿
lcyxlbohqa
效果是一樣的，就不貼圖了。（首先，ul設定左浮動是為了 使得ul的寬度不是100%，而是 幾個li寬度的總和。 之後ul相對定位 使用left把ul移動到劇中位置。因為相對定位是以原來的位置為原點的，所以先整體移動中間，這樣子元素的左邊是中心線，那麼只要left:-50% 或者right:50%就居中了）
原文位址：
本文位址:
CSS水平居中和垂直居中的各種方法
前端開發 武方博 css的居中有水平居中和垂直居中，這兩種居中又分為行內元素居中和塊級元素居中，不同的居中用不同方法。水平居中 1 行內元素水平居中 文字，給父層設定 text align center 可以實現行內元素水平居中。谷歌搜尋 2 確定寬度塊級元素水平居中 確定寬度的塊級元素水平居中，常...
CSS網頁布局DIV水平居中的各種方法
在web標準中的頁面布局是使用div配合css來實現的。這其中最常用到的就是使整個頁面水平居中的效果，這是在頁面布局中基本，也是最應該首先掌握的知識。不過，還是經常會有人問到這個問題，在這裡我簡單總結一下使用div和css實現頁面水平居中的方法 一 margin auto 0 與 text alig...
CSS水平居中的幾種方法
如果被設定元素為文字 等行內元素時，水平居中可以通過父元素設定text align center來實現。html style text align center 我是文字，哈哈，我想要在父容器中水平居中顯示。div body 當被設定元素為塊狀元素時用 text align center 就不起作用...