Question

demo

div{
    display: table-cell;
    height: 100px;
    background-color: red;
    vertical-align: middle;
    /*position: absolute;*/
}

在上面的演示中如果您从position: absolute;删除评论，则vertical-align将无效。

我还找到了this question，但这里添加了一个父div。但在我的情况下，我需要没有触及标记。有什么想法吗？

Answer 1

这是您的详细信息的参考位置：绝对力显示：阻止，读取数字2 here。

至于解决方法，我认为你必须把它包装在另一个元素中：

Answer 2

将此小提琴视为解决方法.. http://jsfiddle.net/DjGQ5/ 使用padding-top更改display : block和p标记中的Wrapped文本：css中的50％属性

Answer 3

哇！我做的。见demo

div{
    display: table-cell;
    height: 100px;
    background-color: red;
    vertical-align: middle;
    position: absolute;
}
div:before{content: " "; height: 50%; display: inline-block;}

Answer 4

Jus make Position:relative现在很好......更新了小提琴......这是链接..

Demo

垂直对齐到绝对定位的div

4 个答案: