指定父级宽高 子级不定
1、transform: translate(-50%, -50%)
缺点:IE9以下不支持
.set-fun {
position: relative;
height: 128px;
width: 128px;
text-align: center;
background-color: white;
}
.set-fun .fun-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2、table table-cell
缺点:IE8以下不支持
#container_outer{
display:table;
overflow:hidden;
width:600px;
height:400px;
}
#container_inner{
vertical-align:middle;
display:table-cell;
text-align:center;
border:1px solid #000;
}
#content{
display:inline-block;
border:1px solid #000;
}
<div id="container_outer">
<div id="container_inner">
<div id="content">
动态内容...<br/>
动态内容...<br/>
动态内容...
</div>
</div>
</div>
a、table table-cell vertical-align:middle; 保证了垂直居中
b、 text-align:center; display:inline-block; 保证了水平居中
网友评论