设置img在div中⽔平居中和垂直居中
前⾔
写 html + css 时，img 标签的垂直与⽔平居中，应该是很常见的设计。实现的⽅式很多，但是容易遗忘，下⾯分别整理了⼏种实现⽅式。
css 代码
<style type="text/css">
p, img{
margin: 0px;
}
#div1{
width: 600px;
/*border: 1px solid blue;*/
margin: 0px auto;
}
.interior{
width: 100%;
height: 120px;
border: 1px solid purple;
margin-bottom: 5px;
}
.interior img{
width: 100px;
height: 100px;
border: 1px solid orange;
}
#div1_1{
text-align: center;
line-height: 118px;
}
#div1_1 img{
display: inline-block;
vertical-align: middle;
}
#div1_2{
text-align: center;
display: table;
}
#div1_2 span{
display: table-cell;
vertical-align: middle;
}
#div1_3{
position: relative;
text-align: center;
}
#div1_3 img{
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
#div1_4 {
text-align: center;
}
#div1_4 img {
position: relative;
top: 9px;
text align center}
</style>
html 代码
<div id="div1">
<p>⽅式1. 使⽤</p>
<p>div: text-align: center; line-height: 150px;</p>
<p>img：display: inline-block; vertical-align: middle;</p>
<div id="div1_1" class="interior">
<img src="../../../../Images/20170319161233408.jpg" />
</div>
<p>缺点：<p>
<p>1. 需要⽗ div 定义 text-align: center; 这样如果有其他元素也会同样⽔平居中。</p>
</br>
<p>⽅式2. 使⽤</p>
<p>div: text-align: center; display: table;</p>
<p>span: table-cell; vertical-align: middle;</p>
<div id="div1_2" class="interior">
<span>
<img src="../../../../Images/20170319161233408.jpg" />
</span>
</div>
<p>缺点：<p>
<p>1. 需要⽗ div 定义 text-align: center; 这样如果有其他元素也会同样⽔平居中。</p>
<p>2. ⽽且需要使⽤ span 标签将 img 标签包裹。</p>
</br>
<p>⽅式3. 使⽤绝对定位 img</p>
<p>div: position: relative;</p>
<p>img：position: absolute; left:50%; top: 50%; margin-left: -50px; margin-top: -50px;</p>    <div id="div1_3" class="interior">
<img src="../../../../Images/20170319161233408.jpg" />
<span>span 1 span 1 span 1</span>
</div>
<p>缺点：<p>
<p>1. 如果内部有其他元素时，都⽔平垂直居中，会被 img 遮盖。</p>
</br>
<p>⽅式4. 使⽤相对定位 img</p>
<p>div: text-align: center;</p>
<p>img：position: relative; top: 9px;</p>
<div id="div1_4" class="interior">
<img src="../../../../Images/20170319161233408.jpg" />
<span>span 1 span 1 span 1</span>
</div>
<p>缺点：<p>
<p>1. 需要⽗ div 定义 text-align: center; 这样如果有其他元素也会同样⽔平居中。</p>
<p>2. 必须知道⽗ div 的⾼度，⾃⾏调整 top 值，在⾼度不确定的情况下就不能使⽤了。</p>
</div>
运⾏效果
总结
其实⽅式1、2、3 都并没有真正的垂直居中，仔细观察会发现，不是上边距⽐下边距⾼了⼏px，就是下边距⽐上边距⾼了⼏px。是否有其他⽅式可以解决呢？
如果在⽗ div ⾼度确定的情况下，⽅式4是⽐较可取的，浏览器兼容也挺好。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。