在文章開頭先說明一下此方法的兼容性，IE8+以及其他現代瀏覽器都支持此屬性。
直接獻上一個demo吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table-cell Demo</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
h3 {
position: absolute;
z-index: 9;
top: 0;
right: 0;
margin: 0;
}
h5 {
position: absolute;
z-index: 8;
top: 230px;
right: 0;
margin: 0;
color: red;
}
.line {
position: absolute;
width: 100%;
height: 250px;
border-bottom: 1px solid red;
}
.box {
/*非IE的主流瀏覽器識別的垂直居中的方法*/
display: table-cell;
vertical-align: middle;
/*設置水平居中*/
text-align: center;
/* 針對IE的Hack */
*display: block;
/*約為高度的0.873，200*0.873 約為175*/
*font-size: 175px;
/*防止非utf-8引起的hack失效問題，如gbk編碼*/
*font-family: Arial;
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
.img1 {
width: 40px;
height: 40px;
/*設置圖片垂直居中*/
vertical-align: middle;
}
.img2 {
width: 80px;
height: 80px;
/*設置圖片垂直居中*/
vertical-align: middle;
}
.img3 {
width: 120px;
height: 120px;
/*設置圖片垂直居中*/
vertical-align: middle;
}
</style>
</head>
<body>
<div class="line"></div>
<div class="box">
<span>bpdqooo</span>
<img class="img1" src="./home.jpg"/>
<img class="img2" src="./home.jpg"/>
<img class="img3" src="./home.jpg"/>
<span>bpdqooo</span>
</div>
<h3>table-cell實現垂直居中</h3>
<h5>中線</h5>
</body>
</html>
以下是說明：
將class=”box”的div設為display: table-cell，即可實現div內元素的垂直居中
將我的demo用瀏覽器打開，可以看到我放了3張大小不一的圖片，還有兩段文字，我們暫且把這些東西看作是一行
好，為什么我要放三張圖片呢？
現在我們可以做個實驗：
把最大的圖片(class=”img3”)設為vertical-align: top
可以看到其他圖片和文字均向上偏移，而且第二大的圖片(class=”img2”)頂部和img3對齊，這說明，img3的vertical-align屬性控制行內其他所占高度更小的元素，並且對img2作用最強
接着上一步，再來做個實驗：
把img2設為vertical-align: top
可以看到img1和文字均向上偏移，而且img1頂部和img3對齊，這說明，img2的vertical-align屬性控制行內其他所占高度更小的元素，並且對img1作用最強
你是不是似乎明白了什么，同理，若把img設為vertical-align: top，那么兩邊的文字將會向上偏移，頂部與img1對齊。
結論：
table-cell內的元素，均可視為同一行中
如果只有單行，
該行的高度由最高的元素決定
若對行內某一元素進行設置vertical-align: top，則該屬性影響其余高度更小的元素，且對高度最接近的元素作用最強（使之與其頂部對齊）
如果有多行，