第一种方法，利用盒布局实现
<style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; height:100px; background: yellowgreen; display:-moz-box; -moz-box-align:center; -moz-box-pack:center; } </style> <div class="div1"> <img src="xmpho-tag.png" style="vertical-align: middle"> <span>盒布局实现图片与文字水平垂直居中</span> </div>
第二种，非盒布局实现
<style type="text/css"> .div2{ width: 100%; height:100px; background: yellowgreen; text-align: center; line-height: 100px; } </style> <div class="div2"> <img src="xmpho-tag.png" style="vertical-align: middle"> <span>非盒布局实现图片与文字水平垂直居中</span> </div>
原文：http://www.cnblogs.com/bm20131123/p/4746914.html