我们经常遇到需要把div中的内容进行水平和垂直居中(多数是将图片水平垂直居中),这里把我常用的一些方法总结一下,可能比较low,烦请大家指正
table-cell方法
需要有两个容器包住img,上代码:
HTML
<div class="box">
<div class="wrapper">
<img src="./activity_pic.png">
</div>
</div>
CSS
*{
padding:0;
margin:0;
}
.box{
background-color:#eee;
border:2px solid #000;
width:500px;
height:500px;
margin:50px auto;
display:table;
}
.wrapper{
text-align:center;
display:table-cell;
vertical-align:middle;
}
IE8/Firefox/Chrome/Safari/Opera页面效果:
IE6/IE7页面效果:
IE6/7代码兼容:
<!--[if lte IE 7]>
<style>
.box{
position:relative;
}
.wrapper{
position:absolute;
left:50%;
top:50%;
}
.wrapper img{
position:relative;
left:-50%;
top:-50%;
}
</style>
<![endif]-->
容器中只有一个img,没有其他元素,可通过vertical-align方法居中
当容器中只有一个img,并且img的状态是行内元素时,可以通过设置行高为容器高度,设置img的vertical-align:middle居中,代码:
div{
height:300px;
line-height:300px;
text-align:center;
}
div > img{
vertical-align:middle;
}
已知要居中元素的宽高,可以通过定位的方法来实现垂直水平居中
比如说要将div中的img居中,已知img高度规定为300*200,则代码如下:
div{
position:relative;
}
div > img{
width:300px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
还有一种定位方法
html
<div class='dad'>
<div class='son'></div>
</div>
css
.dad{
position:relative;
}
.son{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto; //这是必须的
}