vertical-align: middle的用法

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

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

1. 首先从定义上
   
   • 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
   • middle:把此元素放置在父元素的中部。
   • 定义就让人很难以理解，读来读去饶了几遍，但是middle的意思看起来又如此简单。
2. 错误代码

<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>