先寫出HTML結構：

分別對div,span,img加css程式碼：

#content {
position:absolute;
top:0;bottom:0;left:0;right:0;
margin:auto;                  /*上右下左外邊距全部為auto,實現水平垂直居中
                               margin:0 auto 上下外邊距為0，左右居中顯示;*/
width:500px;
height:500px;
background-color:yellow;
text-align:center;           /*元素中的文字居中*/
}
.vertical-align-span {
display:inline-block;
width:0px;
height:100%;
vertical-align:middle;
}
#content img{
vertical-align:middle;

}

結果如下：

display:inline; 內聯元素，簡單來說就是在同一行顯示。
display:block; 塊級元素，簡單來說就是就是有換行，會換到第二行。
display:inline-block; 就是在同一行內的塊級元素。

說概念太模糊，來個真實案例吧。

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">連結一</a>

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">連結一</a>

A預設就是一行，所以inline用在這裡是廢的。寬高度設定也是費的。

<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">連結一

</a><a href="#" style="display:block;width:100px;height:100px;background:#ccc;">連結一</a>

塊狀，這裡高寬度就生效了，但是因為是塊狀，前後有換行符，所以這是兩行了。

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">連結一</a>

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">連結一</a>

這樣就是同時達到塊狀，而且在同一行顯示。