不定高寬的塊級元素居中的方法

不定高寬的元素居中的方法

1、水平居中

方法一:

父層：text-align:center;

子層: display:inline-block;

//將子元素轉換爲行內塊元素即可，這樣就可以使用text-align屬性了

注意：IE6、7不兼容inline-block，解決辦法：*zoom:1;*display:inline;

方法二:

父層：{
        float:left; /*自適應內容寬度*/
        position: relative;
        left:50%; /*讓con1的左邊在*/
        border:1px solid green;

    }

子層:{
        position: relative;
        left:-50%;/*相對於父元素相對定位，據左邊一半的距離*/
        border:1px solid red;
    }
 

3、水平垂直居中

方法二：

表格的內容是垂直居中的，所以可以利用table來做，但它裏面的內容是行內元素才行

<span style="font-size:24px;">table{position:absolute;width:100%;height:100%;text-align:center;}
.test{display:inline-block;*zoom:1;*display:inline;}

<table>
<tbody>
<tr>
<td>
<div class="test">
水平垂直居中了吧<br>
兩行文字哦
</div>
</td>
</tr>
</tbody>
</table></span>

方法三：


仿效表格的做法，td默認設置display：table-cell;
tbody默認vertical-align:middle;
tr、td繼承tbody的設置
table-cell屬性值可以讓元素渲染爲表格單元格，輕鬆實現讓子元素水平垂直居中


父層：display:table-cell;
         text-align:center;
         vertical-align:middle;
子層：display:inline-block;


<div class="wrap">
   <div class="test">
     水平垂直居中了吧<br>
     兩行文字哦
   </div>
</div>


方法四：使用transform實現(IE6/7/8不兼容)


一般而言，百分比的單位都是相對父元素來計算，而transform比較特別，它是相對於自身的寬高來計算的。
前面的定寬高下利用transform：translate（）來居中，同理，這裏也可以這麼幹。

<span style="font-size:24px;">.fu{
position:absolute;top;50%;left;50%; 
transform:translate(-50%;-50%);
-webkit-transform:translate(-50%;-50%);
-moz-transform:translate(-50%;-50%);
-ms-transform:translate(-50%;-50%);
-o-transform:translate(-50%;-50%);
}


<div class="fu">
<div class="zi">dddddd</div>
</div>
</span>

方法五：

彈性盒模型（css3裏面的內容，低版本IE不支持）

<span style="font-size:24px;">.test_box {
display: -moz-box; 
display: -webkit-box;
display: -o-box; 
display: box; 


width: 400px; 
height: 250px;
padding: 20px; 
background: #f0f3f9;


-webkit-box-pack:center;//水平居中
-webkit-box-align:center;//垂直居中


}
.list {
padding: 0 1em; 
font: bold 36px/120px monaco; 
text-shadow: 1px 1px #eee;
background-color: red;
border:1px solid;
}


<div class="test_box">
<div class="list">1</div>
<div class="list" style="line-height:200px;">2</div>
<div class="list">3</div>
</div>
</span>

總的來說，要居中可以考慮幾個屬性以及它們之間的配合使用

text-align:center;
display:inline-block;
display:table-cell;
vertical-align:middle;

transform:translate();