不定高宽的元素居中的方法
不定宽高情况下的居中方法
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()来居中,同理,这里也可以这么干。
.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>
方法五:
弹性盒模型(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();