html - 如何使用垂直对齐: middle

Question

直播:http://jsfiddle.net/8hAv3/

#main {
    width: 100px;
    height: 100px;
    background-color: red;
}
#sub {
    width: 100%;
    height: 100%;
    background-color: blue;
    vertical-align: middle;
}

<div id="main">
    <div id="sub">TEXT</div>
</div>

为什么在此示例中垂直对齐不起作用？我怎样才能做到？我不想以 px 为单位使用边距、填充和设置高度。这可能吗？

Answer 1

这应该有效:

#main {
    width: 100px;
    height: 100px;
    background-color: red;
    display: table;
}
#sub {
    display: table-cell;
    height: 100%;
    width: 100%;
    background-color: blue;
    vertical-align: middle;
}

http://jsfiddle.net/8hAv3/2/