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

【问题标题】：vertical-align middle not working on table-cell垂直对齐中间不适用于表格单元格
【发布时间】：2014-03-28 15:40:22
【问题描述】：

请检查http://jsfiddle.net/4Ly4B/ vertical-align: middle table-cell 没有出现在中间

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

您的意思是将position: relative; 分配给容器吗？

【解决方案2】：

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

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

}

【讨论】：

【解决方案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;
}

【讨论】：