前幾天一個同事告訴我margin： auto；可以垂直居中，我驚愕：“怎么會？margin: auto不是只能水平居中嗎！”。后面他告訴我，他剛發(fā)現(xiàn)在彈性布局下，margin: auto 0是可以居中的...
于是有了這一篇筆記，希望能給前端朋友們一點點幫助。
四種方法
目前能做到多行文字垂直居中的方法，大約是4種（彈性布局之前是兩種）。
關鍵樣式相同，表示一種方法。
本小節(jié)只寫出核心樣式，具體代碼見下一節(jié)。
方法一： flex + align-items: center
#method1 {
display: flex;
align-items: center;
}
#method1>.child {
/* flex: 1 1 auto; */
}
方法二： flex + margin: auto
#method2 {
display: flex;
}
#method2>.child {
/* flex: 1 1 auto; */
margin: auto 0;
}
方法三： line-height + inline-block && vertical-align: middle
#method3 {
line-height: 400px; /*同height */
}
#method3>.child {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
方法四： table + display: table-cell && vertical-align: middle
#method4 {
display: table;
}
#method4>.child {
display: table-cell;
vertical-align: middle;
}
示例和代碼
示例（方法四會影響布局，故在示例中隱藏了，需要看方法四效果的可以把display：
none注釋掉）
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-size: 12px;
}
#test {
display: flex;
height: 600px;
align-items: center;
background-color: #fcf;
border: 1px solid #f69;
}
#test>div {
position: relative;
flex: 1 1 auto;
box-sizing: border-box;
height: 400px;
background: #fff;
border: 1px solid #999;
}
#test .flag {
position: absolute;
top: 10px;
right: 10px;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
font-weight: 700;
color: #eee;
border: 1px solid #333;
border-radius: 20px;
background-color: #333;
}
/* flex + align-items: center */
#method1 {
display: flex;
align-items: center;
}
#method1>.child {
flex: 1 1 auto;
}
/* flex + margin: auto */
#method2 {
display: flex;
}
#method2>.child {
flex: 1 1 auto;
margin: auto 0;
}
/* line-height + inline-block && vertical-align: middle */
#method3 {
line-height: 400px;
}
#method3>.child {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
/* table + display: table-cell && vertical-align: middle*/
#method4 {
display: none;
/* display: table; */
width: 300px;
}
#method4>.child {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="test">
<div id="method1" class="parent">
<span class="flag">1</span>
<div class="child">
可人不是斷氣的時候才真的死了。有人說人會死三次，第一次是他斷氣的時候，從生物學上他死了；第二次是他下葬的時候，人們來參加他的葬禮，懷念他的一生，然后在社會上他死了，不再會有他的位置；第三次是最后一個記得他的人把他忘記的時候，那時候他才真正的死了。
</div>
</div>
<div id="method2">
<span class="flag">2</span>
<div class="child">
可人不是斷氣的時候才真的死了。有人說人會死三次，第一次是他斷氣的時候，從生物學上他死了；第二次是他下葬的時候，人們來參加他的葬禮，懷念他的一生，然后在社會上他死了，不再會有他的位置；第三次是最后一個記得他的人把他忘記的時候，那時候他才真正的死了。
</div>
</div>
<div id="method3">
<span class="flag">3</span>
<div class="child">
可人不是斷氣的時候才真的死了。有人說人會死三次，第一次是他斷氣的時候，從生物學上他死了；第二次是他下葬的時候，人們來參加他的葬禮，懷念他的一生，然后在社會上他死了，不再會有他的位置；第三次是最后一個記得他的人把他忘記的時候，那時候他才真正的死了。
</div>
</div>
<div id="method4">
<span class="flag">4</span>
<div class="child">
可人不是斷氣的時候才真的死了。有人說人會死三次，第一次是他斷氣的時候，從生物學上他死了；第二次是他下葬的時候，人們來參加他的葬禮，懷念他的一生，然后在社會上他死了，不再會有他的位置；第三次是最后一個記得他的人把他忘記的時候，那時候他才真正的死了。
</div>
</div>
</div>
</body>
</html>
總結
能使用Flex，建議用方法二（flex + margin: auto）；
不能使用Flex， 建議用方法三（line-height + inline-block && vertical-align: middle）；
雖然方法三和另外三種居中方式有略微差別（2px），但display: table總是會造成一些麻煩。
2px誤差圖片
