在實際工作中我們會遇到需要為「
不定寬度的塊狀元素
」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。(
不定寬塊狀元素
：塊狀元素的寬度width不固定。
) 不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
加入 table
標籤設定 display: inline
方法：與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定
設定 position:relative
和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的
這一小節我們來講一下第一種方法：
為什麼選擇方法一加入table標籤? 是利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括 、、)。
第二步：為這個 table 設定「左右 margin 居中」（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html**：
css**：
不定寬塊狀元素
水平居中之外，本節介紹第2種實現這種效果的方法，改變元素的display型別為
行內元素
，利用其屬性直接設定。
第二種方法：改變塊級元素的 display 為 inline 型別（設定為 行內元素
顯示），然後使用text-align:center來實現居中效果。如下例子：
html**：
css**： 這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
除了前兩節講到的插入table標籤，以及改變元素的
display
型別，可以使不定寬塊狀元素水平居中之外，本節介紹第3種實現這種效果的方法，設定浮動和相對定位來實現。
方法三：通過給父元素設定
float
，然後給父元素設定
position:relative
和left:50%，子元素設定position:relative 和left:
-50%
來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css**是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css**則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
**如下：
css**：
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
水平居中總結 不定寬塊狀元素方法（三）
方法三 通過給父元素設定float，然後給父元素設定 position relative 和left 50 子元素設定position relative 和left 50 來實現水平居中。我們可以這樣理解 假想ul層的父層 即下面例子中的div層 中間有條平分線將ul層的父層 div層 平均分為兩份...
不定寬塊狀元素居中
為什麼選擇方法一加入table標籤?是利用table標籤的長度自適應性 即不定義其長度也不預設父元素body的長度 table其長度根據其內文字長度決定 因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。第一步 為需要設定的居中的元素外面加入乙個 table ...
水平居中總結 不定寬塊狀元素方法（一）
在實際工作中我們會遇到需要為 不定寬度的塊狀元素 設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。不定寬塊狀元素 塊狀元素的寬度width不固定。不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 加入 table 標籤 設定 displa...