淺談CSS中的居中

 

css居中在咱們日常的頁面佈局中應用的十分頻繁，掌握css各類居中方式也是頗有必要的，因此對各類居中方式進行一個小小的總結。

居中主要分爲垂直居中和水平居中，而不一樣元素之間的居中也有所區別，塊級元素的居中，內聯元素的居中。下面咱們對這些居中進行一個小小的總結：

一.水平居中

1.對於塊級元素自身居中首選margin

注意：塊級元素必須設置了寬度，文檔最頂端必須聲明DOCTYPE

通常狀況下，能夠以下設置，這會使這個塊級元素在它的父級元素中居中。

#container{
  margin:0 auto;
}

若是隻要水平居中的話，就設置margin-left:auto;margin-right:auto; 

#container{
    margin-left:auto;
    margin-right:auto;
}

2.對於塊級元素自身居中（不肯定寬度的塊）

如果此時對塊中的內容進行居中的話：

若是塊元素的子元素也是塊元素，

1. 使用margin auto的方式。
2. 子元素使用display :inline;text-align:center;

若是塊元素的子元素爲行內元素，

1. 使用text-align:center;

3.塊中文字水平居中

text-align 用於塊級元素，做用在使用它的塊元素中的文字或者圖片上。使得它們在水平方向上居中。 

<p style="text-align:center"> 
   我是正常p,我設置了居中
</p> 
<span style="display:block; text-align:center">
   我實際上是一個行內元素span哦，我設置了居中，能夠居中而且獨佔一行
</span> 
<p style="display:inline; text-align:center"> 
   能不能再同一行,我是被inline了的p，我設置了居中但是不能居中！
</p>

4.內聯元素自身水平居中

將自身變成塊級元素display:block;再進行水平居中。或者若是其父元素是塊級元素，其父元素使用text-align:center;

注意：此時若是使用margin：auto;會出現錯誤，由於寬度的問題。

二.垂直居中

一、單行內容的居中

只考慮單行是最簡單的，不管是否給容器固定高度，只要給容器設置 line-height 和 height，並使兩值相等，再加上 over-flow: hidden 就能夠了

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}

優勢：
1. 同時支持塊級和內聯極元素
2. 支持全部瀏覽器
缺點：
1. 只能顯示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的佈局的話，overflow: hidden 必定要

二、多行內容居中，且容器高度可變

也很簡單，給出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}

優勢：
1. 同時支持塊級和內聯極元素
2. 支持非文本內容
3. 支持全部瀏覽器
缺點：容器不能固定高度

三、把容器看成表格單元

CSS 提供一系列diplay屬性值，包括 display: table, display: table-row, display: table-cell 等，能把元素看成表格單元來顯示。這是再加上 vertical-align: middle, 就和表格中的 valign="center" 同樣了。

.middle-demo-3{
   display: table-cell;
   height: 300px;
   vertical-align: middle;
}

惋惜IE不支持這些屬性，不過在其餘瀏覽器上顯示效果很是完美。
要注意的是：和一個合法的<td>元素必須在<table>裏同樣，display: table-cell 元素必須做爲 display: table 的元素的子孫出現。

優勢：不用說了吧，就是表格，效果和表格如出一轍
缺點：IE下無效

4.使用絕對定位

原理：元素在過分受限狀況下，將margin設置爲auto，瀏覽器會重算margin的值，過分受限指的是同時設置top/bottom與height或者left/right與width。

.middle-demo-4{
    position:absolute;
    width:50px;
    height:50px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    resize:both;/*用於設置了全部除overflow爲visible的元素*/
    overflow:auto;
}

使用絕對定位要求元素必須設置明確高度。內容超過元素高度時須要設置overflow決定滾動條的出現

優勢：支持響應式，只有這種方法在resize以後仍然垂直居中

缺點：沒有顯式設置overflow時，內容超過元素高度時會溢出，沒有滾動條

5.負margin-top方式

已知元素高度後，使用絕對定位將top設置爲50%，mergin-top設置爲內容高度的一半(height + padding) / 2；內容超過元素高度時須要設置overflow決定滾動條的出現。

.middle-demo-5{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    margin:auto;
    margin-top:-100px; /*-(height+padding)/2*/
    width:200px;
    height:200px;
}

優勢：代碼量少、瀏覽器兼容性高支持ie6 ie7

缺點：不支持響應式(不能使用百分比、min/max-width)