今天小编跟大家讲解下有关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=http://xyrl.com/skin/7ke/image/nopic.gif </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; 高度可以不定死 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里面的图片水平与垂直居中的方法 希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！
来源：爱蒂网
