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>