CSS中的各種置中方法總結

標籤：

CSS中的置中可分為水平置中和垂直置中。水平置中分為行內元素置中和塊狀元素置中兩種情況，而塊狀元素又分為定寬塊狀元素置中和不定寬塊狀元素置中。下面詳細介紹這幾種情況。

 

一、水平置中

1、行內元素置中

 顧名思義，行內元素置中是只針對行內元素的，比如文本（text）、圖片（img）、按鈕等行內元素，可通過給父元素設定 text-align:center 來實現。另外，如果塊狀元素屬性display 被設定為inline時，也是可以使用這種方法。但有個首要條件是子項目必須沒有被float影響，否則一切都是無用功。

.div1{        text-align:center;    }<div class="div1">Hello world</div>

 

2、塊狀元素置中

（1）、定寬塊狀元素置中

 滿足定寬（塊狀元素的寬度width為固定值）和塊狀兩個條件的元素可以通過設定“左右margin”值為“auto”來實現置中。

.div1{
　　　　 width:200px;
　　　　 border:1px solid red;        margin:0 auto;    }<div class="div1">Hello world</div>

 

（2）、不定寬塊狀元素置中

在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設定置中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)

有三種方法可以對不定寬塊狀元素進行置中：

方法1：

將要顯示的元素加入到 table 標籤當中，然後為 table 標籤設定“左右margin”值為“auto”來實現置中； 或使用 display : table；然後設該元素“左右margin”值為“auto”來實現置中。後面的display:table; 方法會更簡潔。

為什麼加入table標籤? 是利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀置中的margin的方法，使其水平置中。

如下例子：

table{    margin:0 auto;}<div><table>  <tbody>    <tr><td>    <ul>        <li>Hello world</li>        <li>Hello world</li>    </ul>    </td></tr>  </tbody></table></div>

.wrap{    background:#ccc;    display:table;    margin:0 auto;}<div class="wrap">  Hello world  </div>

方法2：

改變區塊層級元素的 display 為 inline 類型（設定為 行內元素 顯示），然後使用 text-align:center 來實現置中效果。

這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值（變成inline-block就可以設定寬高）。

.container{    text-align:center; }.container ul{    list-style:none;    margin:0;    padding:0;    display:inline;  //怎麼這一句用不用都是一樣效果的？ }<div class="container">    <ul>        <li>Hello world</li>        <li>Hello world</li>    </ul></div>

方法3：

 通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子項目設定 position:relative 和 left: -50% 來實現水平置中。

.wrap{    float:left;    position:relative;    left:50%;    clear:both;}.wrap-center{    background:#ccc;    position:relative;    left:-50%;}<div class="wrap">    <div class="wrap-center">Hello world</div></div>

 先設定父元素wrap清除浮動，然後左浮動。定位讓wrap向右位移50%。然後定義子項目相對於父元素向左位移50%。脫離父元素。加個邊框就可以明白一些了。另外用絕對位置也是可以的。

 

二、垂直置中

 垂直置中可分為父元素高度確定的單行文本，以及父元素高度確定的多行文本。

1、父元素高度確定的單行文本的豎直置中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高，指在文本中，行與行之間的 基準間的距離 )。

.wrap h2{    margin:0;    height:100px;    line-height:100px;    background:#ccc;}<div class="wrap">    <h2>Hello world</h2></div>

2、父元素高度確定的多行文本

有兩種方法：

方法1：

使用插入 table  (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。

.wrap{    height:300px;    background:#ccc;    vertical-align:middle;   /* td 標籤預設情況下就預設設定了 vertical-align 為 middle，可以不需要顯式地設定 */}<table>    <tbody>        <tr>            <td class="wrap">                <div>                    <p>Hello world</p>                    <p>Hello world</p>                    <p>Hello world</p>                </div>            </td>        </tr>    </tbody></table>

.wrap{    background:#ccc;    display:table;    vertical-align:middle;}<div class="wrap">    <p>Hello world</p>    <p>Hello world</p>    <p>Hello world</p></div>

方法2：

設定區塊層級元素的 display 為 table-cell（設定為表格單元顯示），啟用 vertical-align 屬性。但這種方法相容性比較差， IE6、7 並不支援這個樣式。

.wrap{    height:300px;    background:#ccc;        display:table-cell;/*IE8以上及Chrome、Firefox*/    vertical-align:middle;/*IE8以上及Chrome、Firefox*/}<div class="wrap">    <p>Hello world</p>    <p>Hello world</p>    <p>Hello world</p></div>

 註：主要參考慕課網教程

CSS中的各種置中方法總結