vertical-align: middle的用法

在开发前端网页的过程中，水平居中有text-align:center和margin：0 auto。但是垂直居中始终没有一个比较好的解决方案，css中的vertical-align是垂直居中的意思，但是使用起来让人很难以理解 。

vertical-align在css中有着丰富的属性，是我见过为数不多的，今天着重研究vertical-align: middle的用法，其他属性基本与此同理。

首先从定义上

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

middle:把此元素放置在父元素的中部。

定义就让人很难以理解，读来读去饶了几遍，但是middle的意思看起来又如此简单。

错误代码

<div class="big">
<span class="small">dsada</span>
</div>
<style>
.big{
width: 200px;
height: 200px;
border: 1px solid #000;
/*vertical-align: middle;*/
}
.small{
/*vertical-align: middle;*/
/*display: inline-block;*/
}
</style>

我首先把vertical-align: middle放到父元素中（text-align:center的用法），然后我放到子元素中（margin:0 auto用法），随后我把span变成行内块级元素，但是结果都没有用。

3.正确代码

<div class="big">
<span class="small">
<span class="small-two">大声道</span>
<span class="small-one">之前的</span>
</span>
</div>
<style>
.big{
width: 200px;
height: 200px;
border: 1px solid #000;
/*vertical-align: middle;*/
}
.small{
background-color: #000;
color: red;
}
.small-one{
line-height: 200px;
}
.small-two{
vertical-align: middle;
}
</style>

就是说我们在想让small-two垂直居中时，必须在定义一个同级的行内元素，让目标元素找到基线，这个里面的middle可能相比line-height看不出效果，如果换成bottom、text-top等就看一看出很明显的效果。

4.如何让图片垂直居中

<div class="big">
<span class="small">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg" height="200" width="200"/>
<span class="text">打我手机看山东</span>
</span>
</div>
<style>
.big{
width: 500px;
height: 400px;
background-color: yellow;
margin: 500px auto;
}
.small{
font-size: 18px;
background-color: #000;
color: #ffffff;
}
img{
vertical-align: middle;
}
.text{
background: green;
width: 200px;
margin-left: 20px;
line-height: 400px;
}
</style>