ch15 CSS 樣式設定技巧

設定元素為水平居中分兩種情況：

如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定 text-align:center 來實現的。

示例如下：


>
class
="txtcenter"
>
文字div
>
body
>

當被設定元素為塊狀元素時，不能通過 text-align：center 設定居中。

這時分兩種情況：

定寬塊狀元素

塊狀元素的寬度 width 為固定值，定寬塊狀元素。

滿足定寬和塊狀兩個條件的元素可以通過設定「左右 margin」值為「auto」實現居中。注意：元素的「上下 margin」是可以隨意設定的。

示例如下：


>
>
定寬塊狀元素div
>
body
>

margin-left
:auto;
margin-right
:auto;

不定寬塊狀元素

塊狀元素的寬度 width 不固定，即不定寬塊狀元素。為不定寬度的塊狀元素設定居中，不能通過設定寬度來限制它的彈性。

為不定寬度的塊狀元素設定居中有三種方法：

這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法視具體情況而定。

加入 table 標籤。

利用 table 標籤的長度自適應性，即不定義其長度也不預設父元素 body 的長度（table 其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的 margin 的方法，使其水平居中。

示例如下：


>
>
>
>
>
>
>
第一行文字li
>
>
第二行文字li
>
>
第三行文字li
>
ul>
td>
tr>
tbody
>
table
>
div>
``````css
>
table
style
>
```

設定 display: inline 方法

改變塊級元素的 display 為 inline 型別，設定為行內元素顯示，利用其屬性直接設定，然後使用 text-align:center 來實現居中效果。

這種方法相比第一種方法的優勢是不用增加無語義標籤，缺點是它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。

示例如下：


>
class
="container"
>
>
>
href
="#"
>
第一行文字a
>
li>
>
href
="#"
>
第二行文字a
>
li>
>
href
="#"
>
第三行文字a
>
li>
ul>
div>
body
>

設定 position:relative 和 left:50%

設定浮動和相對定位來實現居中：通過給父元素設定 float ，然後給父元素設定 position:relative 和 left:50% ，子元素設定 position:relative 和 left: -50% 來實現水平居中。

ul 層的父層中間有條平分線將 ul 層的父層（div層）平均分為兩份，ul 層的 css **是將 ul 層的最左端與 ul 層的父層（div層）的平分線對齊；而 li 層的 css **則是將 li 層的平分線與 ul 層的最左端（也是 div 層的平分線）對齊，從而實現 li 層的居中。

示例如下：


>
class
="container"
>
>
>
href
="#"
>
第一行文字a
>
li>
>
href
="#"
>
第二行文字a
>
li>
>
href
="#"
>
第三行文字a
>
li>
ul>
div>
body
>

設定垂直居中的場景分兩種情況：

父元素高度確定的單行文字

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。(height: 元素的高度，line-height:行高，即行間距，指在文字中，行與行之間的基線間的距離）。

line-height 與 font-size 的計算值之差，在 css 中稱為「行間距」，分為兩半分別加到乙個文字行內容的頂部和底部。

這種文字行高與塊高一致帶來了乙個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。

示例如下：


class
="container"
>
單行文字
div>

父元素高度確定的多行文字

當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句子之一：

position : absolute

float : left 或 float:right

簡單來說，只要 html ****現以上兩句之一，元素的 display 顯示型別就會自動變為以 display:inline-block（塊狀元素）的方式顯示，當然就可以設定元素的 width 和 height 了，且預設寬度不佔滿父元素。

示例如下：


class
="container"
>
href
="#"
title="
">
行內元素標籤a
>
div>