CSS中使用vertical-align:middle使元素垂直居中

在CSS样式中，vertical-align 属性设置元素的垂直对齐方式，vertical-align 这个属性有如下几个参数：
baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
top：和本行位置最高元素对齐。
bottom：和本行位置最低元素对齐

使用过程中，需要在div标签中加个标签作为内容显示，在将标签style属性设置为vertical-align:middle 后，元素内容并没有垂直居中。

事实上，一个div中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个div而言的。第一种解决方法是把 vertical-align:middle 放到一个单元格元素，即table的td元素中，它的垂直居中显示是没任何问题的，因为它表示相对于该行的垂直高度居中显示。

还有另外是我们可以设置元素style中的 line-heght 值为其父元素div的height值，这样 vertical-align:middle 就会使元素内容垂直居中。 建议使用第二种方法。