让图片垂直居中一直没有找到一个很好的办法,今天学习重温after伪类的时候突然看到一个解决方案,觉得很好。
HTML代码:
<body> <div class="pic_box"> <img src="images/img-mobile-1.jpg"/> </div> </body>
CSS代码:
<style> .pic_box{ width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center; } .pic_box img{vertical-align:middle;height:100px;} .pic_box:after{ display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden; } </style>
效果图: