CSS實現垂直居中，vertical-align:middle屬性

vertical-align:middle直接使用是無效的

例如以下代碼並不會起到垂直居中效果：

<div style="width: 100%;height:100px;">  
    <img src="1.png" style="vertical-align:middle">  
</div> 

vertical-align:middle屬於行內垂直居中，要搭配display: inline-block一起使用

<div style="width: 100%;height:100px;background: red">  
    <span style="vertical-align: middle;display: inline-block;height: 100px"></span>  
    <img src="1.png" height="40px" style="vertical-align: middle;">  
</div>  

img的居中是以行內元素的最高值進行居中的,以上img標籤是以span的高度進行居中的

舉個"栗子"，來看看澎湃新聞官方網站的logo設置 就是利用vertical-align屬性來設置的