垂直和水平居中方法小結

水平居中

行內元素

text-align:center;

塊元素

1.定寬塊元素水平居中

 margin:0 auto;

2.不定寬塊元素水平居中

方法一：利用浮動的包裹性和百分比相對定位

<div class='outer'>
   <div class='inner'></div>
</div>

我們想要使inner(不定寬)水平居中於outer，可以這麼做：
先在inner外面再加一層div:

<div class='outer'>
   <div class='wrap'>
      <div class='inner'></div>
   </div>
</div>

起初盒子是這樣的：

CSS這麼寫：

.wrap{
   float:left;
   position:absolute;
   left:50%;
}
.inner{
   position:relative;  //爲啥用absolute沒用啊
   left:-50%;
}

wrap設置爲float的原因是形成包裹，把inner包裹住，此時浮動元素wrap的寬和高都是有內部元素inner撐開的，不再是佔滿整行。也就是說wrap的寬和inner的寬相等。

position:relative設置百分比意思是相對於父元素寬度的百分之幾。此時，wrap的左邊緣距離outer的左邊緣是outer.width的一半，也就是說wrap的左邊緣在outer的中線上。

但是我們想要inner的中線和outer的中線重疊，那麼就需要inner再往左移動它自身寬度的一半，但是它自身的寬度不知道啊，這就是爲什麼需要再加一層wrap且wrap要浮動（包裹）的原因，可根據“relative設置百分比意思是相對於父元素寬度的百分之幾”這個規則。由於wrap的寬度和inner的相等，50%就是inner的寬度的50%。

這個方法也有缺點，由於wrap浮動了，應該清除浮動。

方法二：將要居中的元素放到table的一個td標籤中
原因是table不是塊元素，它不會佔滿整行，其寬度是由內容來撐開的，此時可以設置table的

margin：0 auto;`

即可。
缺點是增加了無語義標籤。

方法三 改變塊元素屬性爲inline或者inline-block
這樣其父元素就可以使用text-align:center居中內部元素

垂直居中

單行文本

設置父元素的height和line-height相等。

父元素高度確定的多行文本、圖片、塊元素

方法一：
將要垂直居中的元素放到table的td中，然後對td設置：

verticle-align:middle;

其實默認就是這樣。verticle-align只適用於 inline level, inline-block level 及 table-cells 元素上。

方法二：
在chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 爲 table-cell，激活 vertical-align 屬性，但注意 IE6、7 並不支持這個樣式。可以不用table-row這一層，直接外層table，內層table-cell就能實現內層元素中的內容垂直居中。例如下面的toCenter想要在box中垂直居中，需要設置box爲table-cell，這樣就可以激活其vertical-align：

<div class="box">
  <div class="toCenter">
       我想要在父元素中垂直居中顯示
  </div>
</div>

.box{display: table-cell;width:200px;height:200px;background: pink;vertical-align: middle;}
.toCenter{width:100px;height:100px;background: purple;}

缺點：ie6和ie7並不支持display:table-cell。

方法三：要居中的元素高度確定
1.利用定位

<div class="outer">
   <div class="inner"></div>
</div>

CSS代碼爲：

.outer{
    background:#FFCCCC;
    border:1px solid #000;
    position:relative;  
}

.inner{
    width:100px;
    height:100px;
    background:#CCFF66;
    position:absolute;
    top:50%;  //父元素高度的一半
    margin-top:-50px;  //上移自身高度的一半             
}

爲啥垂直居中不可以像水平居中方法一一樣啊？

.inner{
    position:relative; 
    top:-50%;
}

沒有用???

2.在要居中元素之前添加一個浮動塊，再設置該塊的margin-bottom

<div class="box">
  <div class="floater"></div>
  <div class="toCenter">
     我想要在父元素中垂直居中顯示
  </div>
</div>

.box{width:500px;height:500px;}
.toCenter{width:100px;height:100px;position: relative;clear: both} //清除浮動
.floater{height: 50%;float:left;margin-bottom: -50px}//下邊距爲 -要居中元素高度的一半

方法四 父元素的上下padding值設爲一樣
當父元素的高度未設置時，將父元素的上下padding值設置爲一樣就可以讓其內部的塊元素垂直方向上看上去居中了。

方法五

.box{position:relative;}
.toCenter{
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    height:240px; 
    width:70%; 
}

方法六 使用box屬性
父元素設置：

display:box;
box-align:center;  //將剩餘空間均分到子元素上下兩側

參考資料：
未知寬度水平居中的幾種方法
CSS實現垂直居中的5種方法

待看資料: CSS 元素垂直居中的 6種方法