是说这个属性么
这个属性严格意义上说并不是垂直居中
它只是让行内元素（文字和图片等）以自身为参照中对齐（top是顶对齐）
但这个参照不是绝对的，他受行高等因素影响(及浏览器的兼容)所以设置了对齐以后往往达不到自己想要的结果。
浏览器的垂直居中是个挺麻烦的事，简单的文字图片的对齐 可以用vertical-align，但稍微复杂点的就不好使啦
通常会用js计算高度在设置其他属性让目标元素居中
目前为止只有table的垂直居中属性 是真正意义上 且不需要js的垂直居中
HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：
所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：
1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。
2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。
完整例子：
html代码：
<ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>
css代码：
<style type="text/css">
.imgWrap li {
float: left
border: solid 1px #666
margin: 10px 10px 0 0
list-style: none
border-collapse: collapse
}
.imgWrap a {
background: #ffa url(images/gridBg.gif) repeat center
width: 219px
height: 219px
display: table-cell/*图片容器以表格的单元格形式显示*/
text-align: center/* 实现水平居中 */
vertical-align: middle/*实现垂直居中*/
}
.imgWrap a:hover {
background-color: #dfd
}
.imgWrap img {
border: solid 1px #66f
vertical-align: middle/*图片垂直居中*/
}
</style>
实现效果如下：
