DIV文字水平垂直居中的方法

水平居中

text-align:center

垂直居中（vertical-align）

vertical-align:middle;

vertical-align時而沒效果

然而真實使用的時候，我們會發現這個屬性“時靈時不靈”，有些情況下我們加了這個屬性之后仍然不見img或者text有任何的變化。那是因為vertical-align只作用在inline-block或者inline，還有table-cell等元素內。同時這兩種還有有所不同。
vertical-align並不是在高度內居中，而是對齊在行高內的middle線上。

所以我總結了兩種使用vertical-align居中的方法：

第一種：

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

　這種情況下圖片和文字可以分行顯示文字在圖片下面同時圖片和文字作為整體在元素內垂直居中。

第二種：

<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屬性的話那么將會不起作用。（可以試試bottom和text-bottom的不同。）