<div class=“box”>
　　<img />
</div>

水平居中的常用方式：

　　text-align:center ——這可以實(shí)現(xiàn)子元素字體，圖片的水平居中。

　　margin:0 auto —— 這是針對(duì)塊元素的水平居中方法

垂直居中的常用方式：   

　　  vertical-align: middle;——這個(gè)垂直居中屬性，只對(duì) inline 或者 inline-block 元素有效。

　　  這里沒考慮flex的垂直居中的用法

div中圖片水平和垂直居中方式：

　　第一種方式：直接手動(dòng)計(jì)算的方式。已知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的值，當(dāng)然也可以使用margin-top，這樣也可以實(shí)現(xiàn)圖片在div里垂直居中。水平居中就用 text-align: center; 就行了。

　　第二種方式：圖片已知寬高

img{
　　　　position:relative;
　　　　top:50%;
　　　　left:50%;
　　　　margin-top:負(fù)圖片height的一半；
　　　　margin-left：負(fù)圖片width的一半；
　　}

　　第三種方式：圖片未知寬高，box最好固定高度。

img{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

 備注：如果不固定，自適應(yīng)高度的話，圖片估計(jì)會(huì)跑到div的上面一點(diǎn)。這種是使用css3的方式來實(shí)現(xiàn)水平垂直居中，當(dāng)然兼容性的話，不支持transform就不支持這種方式了

　　第四種方式： 把box當(dāng)做單元格，box的寬高可不用設(shè)置，讓圖片自己擴(kuò)張也行。這種方式box的寬高最好固定。當(dāng)然不固定也能實(shí)現(xiàn)效果。            

.box{
width: 300px;
height: 300px;
vertical-align: middle;
text-align: center;
display: table-cell;
border: 1px solid red;
}

 備注： display: table-cell 相當(dāng)于是把標(biāo)簽元素當(dāng)作一個(gè)單元格來處理。唯一的缺點(diǎn)就是IE6/7不兼容。　　

　　第五種方式：使用table來達(dá)到水平垂直居中的效果。table的寬高已知

html:

<table class="img_meng_show">
　　<tr>
　　　　<td>
　　　　　　　<img src="">