标签：enter 布局 position logs lex containe content orm contain
已知布局为如下：
<div id="container">
<p>test</p>
<div id="center">12345</div>
</div>
不知道宽和高的情况下：
方法一：
#container{
position:relative;
background:blue;
}
#center{
background:red;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); //translate 是基于元素自身的尺寸来计算的
}
方法二：
<div id="container">
<!--<p>test</p>-->
<div id="center">12345</div>
</div>
#container{
display:flex;
align-items: center;
justify-content: center;
background:blue;
}
#center{
background:red;
}
固定宽和高
#container{
position:relative;
width:300px;
height:300px;
background:blue;
}
#center{
width:100px;
height:100px;
background:red;
position:absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-50px;
}
方法二
#container{
position:relative;
width:300px;
height:300px;
background:blue;
}
#center{
width:100px;
height:100px;
background:red;
position:absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}
标签：enter 布局 position logs lex containe content orm contain
原文地址：http://www.cnblogs.com/ycbeginner/p/7544225.html
