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置中就是這樣實現的