图片垂直居中，留白，盒子水平垂直居中，多行文本水平垂直中

1、图片的垂直居中

vertical-algin:控制行内快和文字的对齐方式
取值：
baseline: 基线
middle: 中线
top: 顶线
bottom: 底线
添加在行内块身上
让图片垂直居中:
1.让文字垂直居中（高等于行高）
2.给图片添加vertical-align:middle;

2.图片元素留白问题

因为图片默认和文字的基线对齐，那么基线到底线还有一段小距离
当对齐完毕后，整个大盒子有图片加上基线到底线那一段距离撑开 所以图片
下面会保留一段小的留白区域。
解决方法：
1、把图片转化成块级元素，图片不存在和基线对齐，就没有空隙
2、vertical-align的取值不为baseline就行;

3、vertical-align的使用场景

留言板的应用

4、让一个盒子水平垂直居中

1、定位
2、用vertical-align
dispaly：inline-block；
给父盒子加line-hieght;
给本身j加vertical-align：middle；
（让图片水平垂直居中的情况下，把盒子转化成行内块，行内块就相当于是图片）

5、多行文本垂直居中

在一个盒子水平垂直居中的基础上，给这个盒子添加一个line-height，这个行高的作用是覆盖掉父盒子的行高。