多行文字垂直居中
2017-11-30 本文已影响162人
歇歇
前几天一个同事告诉我margin： auto；可以垂直居中，我惊愕：“怎么会？margin: auto不是只能水平居中吗！”。后面他告诉我，他刚发现在弹性布局下，margin: auto 0是可以居中的...
于是有了这一篇笔记，希望能给前端朋友们一点点帮助。
四种方法
目前能做到多行文字垂直居中的方法，大约是4种（弹性布局之前是两种）。
关键样式相同，表示一种方法。
本小节只写出核心样式，具体代码见下一节。
方法一： 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误差图片
