第一种情况:div中有一个img标签,图片大小未知?
方法一:主要利用绝对定位和相对定位实现。
父div相对定位。子标签img绝对定位,并且设置top:0;bottom:0;left:0;right:0;和margin:auto,缺一不可。具体代码如下:
html如下:
<div class="box">
<img src="" alt="">
</div>
css如下:
.box{
position: relative;
width:400px;height:400px;
}
.box > img{
top:0px;
bottom:0px;
left:0px;
right:0;
margin:auto;
position: absolute;
}
方法二:主要是利用display:table-cell。
给父级div同时设置3个属性即可,display:table-cell;text-align:center;vertical-align:middle;
html如下:
<div class="box">
<img src="" alt="">
</div>
css如下:
.box{
width:400px;height:400px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
第二种情况:未知大小的div在body中水平垂直居中显示?
主要使用绝对定位和 display:table-cell 和 margin:auto; 属性。具体做法:给要居中显示的div添加下面的css即可:
{
position: absolute; top:50%; bottom:50%; left:50%; right:50%; display: table-cell; margin:auto;
}