不定宽高情况下的居中方法

不定宽高情况下的居中方法

1、水平居中

方法一:

父层：text-align:center;
子层:display:inline-block;

 

3、水平垂直居中

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

方法二：

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

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>

方法三：

仿效表格的做法，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（）来居中，同理，这里也可以这么干。

.zi{
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>

 

方法五：

弹性盒模型（css3里面的内容，低版本IE不支持）

.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>

 

 

总的来说，要居中可以考虑几个属性以及它们之间的配合使用

text-align:center;

display:inline-block;

display:table-cell;

vertical-align:middle;

transform:translate();