不定宽高的元素居中方法

不定宽高的元素居中方法

原文地址：https://www.cnblogs.com/dragonlong/p/4648283.html

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

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;}

水平垂直居中了吧 两行文字哦

方法三：

仿效表格的做法，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;

水平垂直居中了吧
两行文字哦

方法四：使用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%);
}

dddddd

方法五：

弹性盒模型（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;
}

1

2

3

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

text-align:center;

display:inline-block;

display:table-cell;

vertical-align:middle;

transform:translate();