在這里先借用一下張鑫旭大神的概念——幽靈空白節點：
什么是幽靈空白節點呢？
如下圖，我們在一個容器里有兩個內聯塊，左邊內聯塊里是一個圖片，右邊是內聯塊里是文本，我們可以看到中間有一塊空白的地方
關於單行或者多行居中的問題就是從它開始的。
1.如果只有一個圖片我們想讓它垂直居中：
我們只給圖片設置vertical-align:middle 是不起作用的 ，是因為這句話是：將支持valign特性的對象的內容與對象中部對齊 ，看起來是有些拗口，我們這樣翻譯:
支持vertical特性的對象是內聯塊，意思就是兩個內聯塊中部對齊。所以我們可以利用這個幽靈空白節點，讓圖片與這個空白節點的中部對齊就可以實現圖片的垂直居中
代碼如下：
<div class="box">
<div class="photo"></div>
</div>
.box {
width: 300px;
height: 300px;
border: 1px solid;
line-height: 300px; //給父容器設置line-height，幽靈空白節點就會繼承父容器的line-height，從而把內聯塊的高度撐開，空白節點在中間，於是與圖片近似對齊
}
.photo {
display: inline-block;
width: 100px;
height: 100px;
background: url("product.png");
}
此時我們實現了圖片的近似垂直居中，為什么說是近似呢，而恰恰又是因為幽靈空白節點的存在，因為兩者對齊位置與文本的中線其實不在一個水平線上，要偏移一點點，這樣的誤差在文本字體小的時候肉眼
很難分辨，但是文本字體大的時候就杯具(＞﹏＜)了，如圖：
我什么都沒做就是把父布局的字體變大了而已~~~~(>_<)~~~~
所以我們該怎么減少這樣的誤差呢，可以想到當文本的中線與對齊的那條線只要重合就好了，我們可以想象成當font-size趨近於0的時候，文本高度越來越小，那么兩條線就越來越近，當font-size等於0的時候文本就變成了重合的一條線（個人理解），所以解決問題的辦法就是，給父容器的font-size設為0，此時文本兩條線重合，於是問題解決。
所以同理，我們就可以解決單行文本文本與圖片垂直居中的問題了，可以給文本設置和父布局高度相等的line-height（或者直接給父布局設置line-height），然后讓圖片
vertical-align:middle。
2.下面我們來說一下多行文本與圖片居中對齊的問題：
首先我們父容器里的左邊還是一個圖片，右邊是內聯塊，這個塊里有多行文本，如果我們先讓圖片垂直居中的話，同上
.box {
width: 300px;
height: 300px;
border: 1px solid rebeccapurple;
line-height: 300px;
}
.photo {
display: inline-block;
width: 100px;
height: 100px;
background: url("product.png");
vertical-align: middle;
}
.text {
display: inline-block;
line-height: 10px; //這里重寫line-height，不然內聯塊會被撐過大
width: 70px;
height: 70px;
border: 1px solid;
}
<div class="box">
<div class="photo"></div>
<div class="text">
<p>XXXXX</p>
<span>XXXXX</span>
</div>
</div>
可以看到圖片垂直居中了，並且我們發現右邊內聯塊第二行XXXXX的下邊緣與圖片中線對齊，其實可以說是和幽靈空白節點的中線對齊，我們並沒有寫右邊內聯塊的vertical-align
對齊方式，但它有個默認值是baseline，基線（字母X的下邊緣）對齊，（有文本的內聯塊的基線是最后一行文本的的基線，空的內聯塊的基線是底線）所以我們知道了，可以吧幽靈空白節點當參照物呀，把右邊的內聯塊設置成vertical-align:middle，此時不就和幽靈空白節點的中線（和圖片的中線）也對齊了嗎，所以我們在 .text中加上 vertical-align:middle 就好了，如圖
可喜可賀，就是這個樣子，至於誤差的問題，還是一樣的道理，讓幽靈空白節點的font-size為0（父容器的font-size為0，子容器的字體大小重新設置就好），問題解決。
（看我這么萌，贊一個吧O(∩_∩)O）