垂直对齐中间不适用于表格单元格

Question

请检查http://jsfiddle.net/4Ly4B/ 我已经vertical-align: middle< /code> 位于未到达中间的 table-cell 上

Answer 1

具有 display:table-cell 的元素会忽略 min-width 和 min-height。您必须使用高度和宽度。
另外，如果您想使用 position:absolute 定位元素，则可以将该元素包装在容器中，并将 position:absolute 分配给该容器。

请参阅此小提琴： http://jsfiddle.net/4Ly4B/3/

Answer 2

垂直对齐：居中；它基本上用于表格单元格。在您的示例中，位置是绝对的
这样你就可以做到这一点

.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 并添加 padding 来代替它。

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