父元素子元素宽高未知，子元素在父元素里居中

 父元素、子元素宽高均未知，要求子元素在父元素里居中显示

 

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