<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上下垂直居中</title> <style> .demo1{width: 600px;height: 300px;border: 1px solid red;position:relative;margin: 20px auto} .demo1 img{position: absolute;top:0;left: 0;right:0;bottom: 0;margin: auto} .demo2{width: 600px;height: 300px;border: 1px solid red;position:relative;margin: 20px auto} .demo2 img{position: absolute;top: 50%;left: 50%;margin-top: -110px;margin-left: -73px;} .demo3{width: 600px;height: 300px;border: 1px solid red;position:relative;margin: 20px auto} .demo3 img{position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);} .demo4{width: 600px;height: 300px;border: 1px solid red;position:relative;display: table-cell;text-align: center;vertical-align: middle;}
.demo5{ 600px;height: 300px;border: 1px solid red;position:relative;margin: 20px auto;line-height: 300px;text-align: center;}
.demo5 img{vertical-align: middle;} </style> </head> <body> <div class="demo1"> <!-- 1、绝对定位position: absolute;top:0;left: 0;right:0;bottom: 0;margin: auto（不兼容ie6-7） --> <img src="images/demo.jpg" alt=""> </div> <div class="demo2"> <!-- 2、绝对定位position: absolute;top: 50%;left: 50%;margin-top: -110px;margin-left: -73px;（兼容主流浏览器，但img图片宽高得固定） --> <img src="images/demo.jpg" alt=""> </div> <div class="demo3"> <!-- 3、css3 position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);（css3 ie9+） --> <img src="images/demo.jpg" alt=""> </div> <div class="demo4"> <!-- 4、display:table-cell;（css3 ie9+） --> <img src="images/demo.jpg" alt=""> </div>
<div class="demo5">
<!-- 5、vertical-align: middle; (此方法也可以实现，但是要加行高对应div的高度)-->
<img src="images/demo.jpg" alt="">
</div>
</body> </html>
效果图：
有新的方法还望各路大神指点指点。