1、行高 == 高度：已知图片的高宽
<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;"> ??<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" /></div>
2、display:table display:table-cell：不兼容IE6/IE7
<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;"> ???<span style="display: table-cell; vertical-align: middle; "><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></span></div>
3、绝对定位：已知图片的高宽
<div style="width: 500px;height:200px; position: relative; border: green solid 1px;"> ???<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" /></div>
4、flex布局：h5端可用
<style type="text/css"> ???.ui-flex { ???????display: -webkit-box !important; ???????display: -webkit-flex !important; ???????display: -ms-flexbox !important; ???????display: flex !important; ???????-webkit-flex-wrap: wrap; ???????-ms-flex-wrap: wrap; ???????flex-wrap: wrap ???} ???.ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before { ???????box-sizing: border-box ???} ???.ui-flex.justify-center { ???????-webkit-box-pack: center; ???????-webkit-justify-content: center; ???????-ms-flex-pack: center; ???????justify-content: center ???} ???.ui-flex.center { ???????-webkit-box-pack: center; ???????-webkit-justify-content: center; ???????-ms-flex-pack: center; ???????justify-content: center; ???????-webkit-box-align: center; ???????-webkit-align-items: center; ???????-ms-flex-align: center; ???????align-items: center ???}</style><div class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;"> ???<div class="cell"> ???<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="" /> ???</div></div>css实现图片垂直居中
原文地址：http://www.cnblogs.com/ilovexiaoming/p/7839563.html