@TOC
假设HTML如下:
<body>
<div id="box">
<div id="content"></div>
</div>
</body>
1. 兼容性最好的方法 IE7以上
body,html { margin:0; width:100%; height:100%; }
#box {
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
position:relative;
}
#content {
width:50%;
height:50%;
background:pink;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
2. transform进行元素偏移 IE8以上
body,html { margin:0; width:100%; height:100%; }
#box {
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
position:relative;
}
#content{
position:absolute;
width:50%;
height:50%;
background:blue;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
}
3. 弹性盒模型进行布局 IE兼容性差
body,html { margin:0; width:100%; height:100%; }
#box {
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:box;
box-pack:center;
box-align:center;
display:-webkit-flexbox;
-webkit-box-pack:center;
-webkit-box-align:center;
}
#content {
width:50%;
height:50%;
background:blue;
}
4. flex布局 不兼容IE9以下
body,html { margin:0; width:100%; height:100%; }
#box {
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:flex;
display:-webkit-flex;
justify-content:center;
align-items:center;
}
#content {
position:absolute;
width:50%;
height:50%;
background:blue;
}
