父元素、子元素宽高均未知,要求子元素在父元素里居中显示
1、使用定位
<div class="box">
<div> </div>
</div>
.box {position: relative;}
.box div {position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);}
2、使用css3弹性盒模型
<div class="box">
<div> div</div>
</div>
.box {height: 100%;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;}
已知宽高居中
3.
<div class="box">
<div> div</div>
</div>
.box {height: 100%; posotion:relative;}
.box div {width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;}
4.
<div class="box">
<div> div</div>
</div>
.box {height: 100%; posotion:relative;}
.box div {width:100px;
height:100px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;}