目前我知道有5种可以实现多行文字居中的方法：
1.flex布局
2.box布局
3.绝对定位布局
4.table和display:table
5.line-height
flex是2012年之后出的css语法，PC端支持力度还是不行，移动的上IOS支持也有问题
box是2009年初的css语法，移动的上支持还可以，以后的趋势会被flex替代
绝对定位布局，所有浏览器都支持，
line-height所有浏览器都支持，但是有一定的局限性，具体看下述:
单行文字例如:
<p>你好，我是单行文字，我会居中</p>
设置样式如下：
height:30px;
line-height:30px;
border:1px solid red;
可以看到文字相对红色边框上下居中了，我们去掉height:30px;,仍然可以居中
如果代码这样呢:
<p><span>你好，我是单行文字，我会居中</span></p>
height:30px;
line-height:30px;
border:1px solid red;
文字一样居中，因为span继承了p的line-height
如果我们想span不继承父级的line-height，但是父级又给高度，会出现怎么的情景？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 150px;
border:solid red 1px;
line-height: 150px;
}
p{
line-height: 1.4;
}
span{
vertical-align: middle;
display: inline-block;
line-height: 20px;
}
</style>
</head>
<body>
<div>
<span>
afsdf sf d f <br>
afsdf sf d f <br>
afsdf sf d f
</span>
</div>
</body>
</html>
上面代码可以发现多行文字相对了父级居中了【IE8下有问题】，但是这里巨大多数的功劳在于span的vertical-align:middle;如果去掉了这个发现span并没有相对div垂直居中，
这也就是我的疑惑的地方,span不是一个行内元素么，为什么里面加了<br/>就不行了!
我们继续看下下面的代码，尝试下在span里面放多个p来代替上文的<br/>来做换行,希望这个能对上面代码的理解有一定的帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 150px;
border:solid red 1px;
line-height: 150px;
}
p{
line-height: 1.4;
}
span{
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div>
<span>
<p>sfa sfs safsa fsafdasdf </p>
<p>sfa sfs safsa fsafdasdf </p>
<p>sfa sfs safsa fsafdasdf </p>
<p>sfa sfs safsa fsafdasdf </p>
</span>
</div>
</body>
</html>
回到上line-height话题：
“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。”
vertical-align中有top,middle,baseline,bottom与之是由关联的，但具体浏览器的实现有区别，例如英文和中文的实现也是有区别的
vertical-aligin:middle;就是让文字相对它们的中线对齐
本篇文章一如既往的作为个人学习笔记用，不排除有错误和不足之处，如有错误还望指出，谢谢
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
