| <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水平和垂直居中的方法：
第一種方式：
新聞熱點
疑難解答
