图片水平垂直居中 多行文字垂直居中

1.css实现图片垂直居中

 方法一：父级元素设置：display:box;box-align:center;box-pack:center;子元素设置:vertical-align:middle;

html代码：
<div class="box"><img src="img.jpg" alt=""></div>

css样式：
.box{width:500px;height:500px;text-align: center;display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;display:-moz-box;-moz-box-align:center;-moz-box-pack:center;background:#f0f;}
img{width:300px;height:225px;vertical-align: middle;}

注：此方法只支持谷歌火狐浏览器

 方法二：父级元素设置：height:400px;line-height:400px;子元素设置:vertical-align:middle;

html代码：
<div class="box"><img src="img.jpg" alt=""></div> 
css样式：
.box{width:500px;height:500px;line-height:500px;text-align:center;} img{width:300px;height:225px;vertical-align: middle;}
注：此方法更实用，不必考虑兼容问题。此方法是近似垂直居中。

2.css实现多行文字垂直居中

 父级元素设置line-height属性，子元素设置display:inline-block;vertical-align:middle;

html代码：
<div class="box"><p>是到付是到付金额飞机是到付金额飞机是到付金额飞机是到付金额飞机是到付金额飞机是到付金额飞机付金额飞机是到付金额飞是到付金额飞机</p></div> 
css样式：
.box{width:500px;height:500px;line-height:500px;} p{line-height:normal;vertical-align: middle;display: inline-block;text-align: left;}