html - 垂直对齐 - 它是如何工作的？

Question

所以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

将 line-height 设置#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;
}

演示