我们在写代码的时候，总会遇到一个非常尴尬的问题。明明设置了居中，为什么<span>标签的文字还是没有居中呢。如图，附加代码：
代码
<!DOCTYPE html>
<html>
<head>
<title>文字垂直居中设置</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color:#18222B;
}
.box{
width:150px;
margin:0 auto;
}
span{
display:block;
width:150px;
height:32px;
text-align:center;
background-color:#FFF;
color:#000000;
}
</style>
</head>
<body>
<div class="box">
<span>文字垂直居中</span>
</div>
</body>
</html>
我们可以看到，红色代码明明已经设置了居中，为什么<span>标签还是没有居中呢。
经过分析，本人才知道，text-align:center，是指水平居中。
那么怎么才能让它垂直也居中呢，当查找了一些资料后，发现非常简单。仅仅取消设置一下文字的行高和对应的<span>标签的高度一样就可以了。（line-height: 32px;）
我们看一下设置好行高后的<span>标签。
