忍无可忍,无需再忍,自己曾经走过的坑,给后来小伙伴填上哦,那些div居中的方法总结。
- 1.父级元素display:table-cell;vertercal-align:middle;子级margin:0px auto;//上代码!(注意只兼容ie8和ie8以上浏览器)
html部分 :<div id="content">
<div class="center">你好</div>
</div>
css部分:#content{
width:800px;height:500px;
display:table-cell;vertical-align: middle;
border:1px solid #f80;
}
#content .center{
border:1px solid #f80;width:100px;
height:100px;margin:0px auto;
}
- 2.利用绝对定位position。以及top,left,right,bottom,margin:auto;zoom:1;等属性//直接上代码!(兼容ie8和ie8以上浏览器!)
html部分 :<div id="content">
<div class="center">你好</div>
</div>
css部分:#content{
width:800px;height:500px;position:relative;
border:1px solid #f80;
}
#content .center{
position:absolute;top:0px;left:0px;right:0px;
bottom:0px;margin:auto;zoom:1;//zoom是用来兼容ie8以下的
border:1px solid #f80;width:100px;
height:100px;
}
3.利用css3 transform属性,绝对定位,以及定位top,left属性!(兼容ie8以上)
html部分 :<div id="content">
<div class="center">你好</div>
</div>
css部分:#content{
width:800px;height:500px;position:relative;
border:1px solid #f80;
}
#content .center{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
border:1px solid #f80;width:100px;
height:100px;
}
我走过的坑,不希望后来小伙伴再走!路过小伙伴觉得文章有用不吝啬给攒啊!或者关注一波!你懂得!