CSS中的各類居中方法總結

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

 

1、水平居中

一、行內元素居中

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

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

 

二、塊狀元素居中

（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%。脫離父元素。加個邊框就能夠明白一些了。另外用絕對定位也是能夠的。

 

2、垂直居中

 垂直居中可分爲父元素高度肯定的單行文本，以及父元素高度肯定的多行文本。

一、父元素高度肯定的單行文本的豎直居中的方法是經過設置父元素的 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>

二、父元素高度肯定的多行文本

有兩種方法：

方法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 屬性。但這種方法兼容性比較差， IE六、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>

 注：主要參考慕課網教程