文本文字在DIV中垂直水平居中显示

1，这个属性可以图片，文本等在元素中垂直居中

vertical-align:middle;

2，但是vertical-align时而没效果，原因是因为：vertical-align只作用在inline-block或者inline，还有table-cell等元素内

3，总结两种使用vertical-align居中的方法：

1.第一种

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p>
</div>

这种情况下图片和文字可以分行显示文字在图片下面同时图片和文字作为整体在元素内垂直居中。

2.第二种

<div style="height:180px;line-height:180px;">
    <img src="02.jpg" alt="图片" style="vertical-align:middle;" />
    这是文本内容.
</div>

这种情况下文字是因为line-height属性而居中，跟vertical-align属性没有关系。同时img对齐在middle线上，但是如果父盒子去掉了line-height属性的话那么将会不起作用