DIV CSS 佈局教程網

一、水平居中

1、行內元素

對於行內元素，如果要水平居中，很簡單，使用text-align屬性即可：

 
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:relative;
   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

這樣其父元素就可以使用text-align:center居中內部元素

二、垂直居中

1、單行文本

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

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

方法一：

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

 
vertical-align:middle;

其實默認就是這樣。vertical-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;  //將剩余空間均分到子元素上下兩側