DIV或者DIV里面的图片水平与垂直居中的方法

DIV或者DIV⾥⾯的图⽚⽔平与垂直居中的⽅法
<div class=“box”>
<img />
</div>
⽔平居中的常⽤⽅式：
text-align:center ——这可以实现⼦元素字体，图⽚的⽔平居中。

margin:0 auto —— 这是针对块元素的⽔平居中⽅法
垂直居中的常⽤⽅式：
vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-block 元素有效。

这⾥没考虑flex的垂直居中的⽤法
div中图⽚⽔平和垂直居中⽅式：
第⼀种⽅式：直接⼿动计算的⽅式。

已知box的⾼度和图⽚的⾼度
.box{
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
}
img{
width: 80px;
height: 80px;
padding-top: 110px;
}
备注：这种⽅式是：⽤box的⾼度减去图⽚的⾼度再除以2，就是padding-top的值，当然也可以使⽤margin-top，这样也可以实现图⽚在div⾥垂直居中。

⽔平居中就⽤ text-align: center; 就⾏了。

第⼆种⽅式：图⽚已知宽⾼
img{
position:relative;
top:50%;
left:50%;
margin-top:负图⽚height的⼀半；
margin-left：负图⽚width的⼀半；
}
第三种⽅式：图⽚未知宽⾼，box最好固定⾼度。

img{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
备注：如果不固定，⾃适应⾼度的话，图⽚估计会跑到div的上⾯⼀点。

这种是使⽤css3的⽅式来实现⽔平垂直居中，当然兼容性的话，不⽀持transform就不⽀持这种⽅式了
第四种⽅式：把box当做单元格，box的宽⾼可不⽤设置，让图⽚⾃⼰扩张也⾏。

这种⽅式box的宽⾼最好固定。

当然不固定也能实现效果。

.box{
width: 300px;
height: 300px;
vertical-align: middle;
text-align: center;
display: table-cell;
border: 1px solid red;
}
备注： display: table-cell 相当于是把标签元素当作⼀个单元格来处理。

唯⼀的缺点就是IE6/7不兼容。

第五种⽅式：使⽤table来达到⽔平垂直居中的效果。

table的宽⾼已知
html:
<table class="img_meng_show">
<tr>
<td>
<img src="">
</td>
</tr>
</table>
css:
.img_meng_show td{
vertical-align: middle;
text-align: center;
}
DIV⽔平和垂直居中的⽅法：
第⼀种⽅式：
HTML:
<div class="box></div>
css:
.box{
position:absolute(或者是fixed);
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
width:100px;
height:200px;
}
　这个能实现div垂直和⽔平居中，但是必要条件就是宽⾼必须加上，margin也必须加上。

如果想⾥⾯的图⽚也⽔平和垂直居中，可以参照上⾯图⽚⽤margin-left这种⽅式；
　如果只想垂直居中，只要top与bottom，然后 margin:auto 0;
　同理，只想⽔平居中，只要top与bottom，然后 margin: 0 auto;
　但是这种⽅法不⽀持ie8以下。

第⼆种⽅式：
使⽤css3 translate的⽅法，也能让div垂直⽔平居中：
.box{
position: fixed（或者absolute）;
top: 50%;
left: 50%;
width: 100px;
/*height: 100px;*/⾼度可以不定死
background: skyblue;
transform: translate(-50%,-50%);
}
如果是div中的div，即
<div class="out">
<div class="in"></div>
</div>
这种结构，也可以参考图⽚在div中⽔平和垂直居中的⽅式实现。

只是块元素的⽔平居中的话 text-align: center; 要换成margin: 0 auto;
总结
以上所述是⼩编给⼤家介绍的DIV或者DIV⾥⾯的图⽚⽔平与垂直居中的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持！。