vertical-align是什么意思？先舉個例子！
這句html元素中的文本為什么不能垂直居中。
<style>
span{ height:60px;vertical-align: middle; #1c93b7;
}
</style><span >dddddddda</span>我用瀏覽器試了一下，它的展示圖如下：
vertical-align聲明在很多中文文檔中解釋是“決定元素在垂直位置的顯示”，它有下面幾個參數baseline | sub | super | top | text-top | middle | bottom | text-bottom | baseline：與元素的基線對齊。middle：與元素中部對齊。sub：字下沉。super：字上升。text-top：文本頂部對齊。text-bottom：文本底部對齊。top：和本行位置最高元素對齊。bottom：和本行位置最低元素對齊。如果按照字面意思理解vertical-align:middle就應該是文字在元素的垂直位置的最中央，把入前面那個標簽中，它的位置應該在一個height為60px的box的中央啊。但是事實上不是這樣的。如果這個vertical-align:middle用來定義一個單元格td，那么它和你想像的一樣起作用，看看下面的例子<tr><td style="height:80px;vertical-align:middle" onmouseover="this.style.verticalAlign='bottom'" onmouseout="this.style.verticalAlign='middle'">text to align</td> </tr></table>
通過mouse over和out事件，我們動態的改變文字的垂直對齊位置，它確實按照你的做法工作。在msdn的文檔中我發現它是可以做用於span元素的，但是沒有詳細解釋vertical-align是怎么工作的。后 來在《CSS20 Programmer’s Reference》（注1）查了查，Page12的The Inline Layout Model小節說明了行內布局的模型。這里有一個模型圖。這段文字說明了在一行文字布局中，vertical-align是用來影響不同元素的對齊位置 的。
W3C官方對vertical-align做了下面的解釋：This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.實 際上，一個Box中由很多行很多元素組成，vertical-align只作用於在同一行內的元素，它的垂直並不是相對於整個Box而言的。前面那個 span定義了一個60px的高度，但是這個span的Box中存在很多行，那段文本並不能對齊到span的中央。因此希望那段文本對齊span的中行， 需要給它定義一個line-height的屬性，讓line-height為60px，作用於一行的vertical-align就按你的想法工作了。table的單元格，因為是一行內的元素，因此vertical-align按照我們的想法來工作，但是在span中並不是這樣的。注1《CSS20 Programmer's Reference》，作者Eric A. Meyer，一本CSS20的編程參考手冊。
還有：
vertical-align對一些特定顯示樣式（例如單元格顯示方式：table-cell）的元素才會起作用。所以要實現上下垂直居中對齊，可以采用如下樣式
|
1
2
|
display
:
table-cell
;
/*按照單元格的樣式顯示元素*/
vertical-align
:
middle
;
/*垂直居中對齊*/
|
-
上面的設置方式相比設置line-height屬性，可以兼容文字有多行的情形。
下面舉例說明：
-
創建Html元素
123<div><span>測試測試，即便是多行，我也還是垂直居中對齊的。</span></div> -
設置css樣式
1div{width:200px;height:115px;border:4pxsolid#ebcbbe;display:table-cell;vertical-align:middle; -
觀察顯示效果
ref: https://zhidao.baidu.com/question/455636351.html