文本图片水平垂直居中

固定高度的元素内垂直居中一行文本

父元素：text-align:center; /*水平居中*/
文本元素：line-height:300px; /*垂直居中：行高=容器高度*/

固定高度的盒子内水平垂直图片

第一种方法：

父元素display属性设置为单元格属性。
display:table-cell; /*借用表格的行为*/
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/

第二种方法：

父元素：

text-align:center;
line-height:200px;/*垂直居中：行高=容器高度*/，相当于设置文本，

img{vertical-align:middle;}不加这个只是相当于图片和文本的顶端对齐，文本垂直居中,图片底端和文本的底端对齐

第三种方法：把图片当作背景来设置（用来弄头像比较方便）

p{300px; height:200px; border:1px solid; background:url(yahoo.png) no-repeat center;}

<p></p>

固定高度的盒子内水平垂直多行文本

父元素display属性设置为单元格属性。
display:table-cell; /*借用表格的行为*/
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/

固定高度的盒子内水平垂直文本和图片

p{border:1px solid; 500px; height:200px; text-align:center; line-height:200px; }
img{vertical-align:middle;}

<p>这是一张<img src="yahoo.png">图片</p>

总结：居中的元素不能是块元素，可以是inline或者inline-block元素;如果同时有多张图片需要居中，那没就可以用一个外部盒子将多张图片包住，当作一张图片来处理。

高度不确定的：

就在图片的css中加 dispaly:block;margin:0 auto;

垂直居中：自己算出（div的高度-图片的高度）/2，得到margin-top值即可。