固定高度的元素内垂直居中一行文本
父元素：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{width: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; width: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值即可。
转载于:https://www.cnblogs.com/YeChing/p/6243717.html
