vertical-align middle不在table-cell上工作

Question

请检查http://jsfiddle.net/4Ly4B/我vertical-align: middle table-cell未找到中间位置

Answer 1

display:table-cell的元素会忽略min-width和min-height。您必须改为使用height和width 此外，如果要使用position:absolute定位元素，则将元素包装在容器中，并将position:absolute分配给此容器。

看到这个小提琴：http://jsfiddle.net/4Ly4B/3/

Answer 2

vertical-align：middle;它是用于table-cell的basicall。在你的示例位置是绝对的 这样你就可以做到这一点

.message{
background-color: gray;
position: absolute;
min-width: 200px;
display: table-cell;
padding:60px 0px 60px 0px;
text-align: center;

}

Answer 3

属性 vertical-align 不适用于 min-height 。移除 min-height 并添加填充而不是

。

.message{
    background-color: gray;
    position: absolute;
    padding-top: 40px;
    padding-bottom: 40px;
    min-width: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}