是说这个属性么
这个属性严格意义上说并不是垂直居中
它只是让行内元素（文字和图片等）以自身为参照中对齐（top是顶对齐）
但这个参照不是绝对的，他受行高等因素影响(及浏览器的兼容)所以设置了对齐以后往往达不到自己想要的结果。
浏览器的垂直居中是个挺麻烦的事，简单的文字图片的对齐 可以用vertical-align，但稍微复杂点的就不好使啦
通常会用js计算高度在设置其他属性让目标元素居中
目前为止只有table的垂直居中属性 是真正意义上 且不需要js的垂直居中
在CSS中，我们可以使用各种方法和技术来使对齐项目，例可以水平和垂直对齐项目。下面本篇文章就来给大家介绍一些使用CSS对齐项目的方法，希望对大家有所帮助。
1、margin : auto
此属性用于将块元素水平对齐到中心。
示例：
注意：使用margin : auto在IE8中不起作用，除非声明了!DOCTYPE。
效果图：
2、position: absolute
我们可以使用position: absolute来对齐项目。
示例：
效果图：
3、text-align: center
我们可以在各种标签中使用text-align: center；它可以将任何用HTML编写的文本对齐。
示例：
效果图：
4、line-height属性
想要垂直对齐项目，我们可以使用line-height属性。line-height 属性设置行间的距离（行高）。
示例：
效果图：
5、padding和text-align属性
我们可以使用padding属性和text-align : center的组合来垂直和水平对齐文本。
示例：
效果图：
本文参考地址： https://www.html.cn/qa/css3/10403.html
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>
实现效果如下：
