Vertical-Align - 它是如何工作的？

Question

所以有代码on JSFidle，我不能让h1里面的字段成为字段的中间...垂直对齐不做他的工作！和保证金自动相同。 Any1有想法吗？

    #welcome{
    vertical-align: middle;
    height: 100px;
}
#welcome h1{
    color: gray;
    font-size: 2.1em;
    font-family:"proxima-nova","sans-serif";
    text-align: center;
    font-weight: bold;
}

Answer 1

将#welcome h1上的行高设置为您希望文本居中的高度，这是居中对齐文字的典型方法。

jsFiddle

#welcome h1 {
    line-height: 100px;
}

Answer 2

如果将line-height设置为与div高度相同，则它将垂直对齐

#welcome{
height: 100px;
}
#welcome h1{
line-height:100px;
}

Answer 3

添加display:table-cell

section{
    display:table-cell;
    vertical-align: middle;
    position: relative;
    top:0px;
    border-bottom: 1px solid #eee;
}

<强> DEMO