html - 垂直对齐内联 block ，高度为 100%

Question

首先，我将列出我的代码和 JSFiddle 的链接。

HTML

<div id="wrapper">
    <div id="container">
        <div id="content">
            Here is the content
        </div>
    </div>
</div>

JS

body,html{height:100%;}
#wrapper{
    height:100%;
    background-color:green;
}
#container {
    display: inline-block ;
    height:100%;
    width:100%;
    background-color:red;
    text-align:center;
    vertical-align:middle;
}
#content
{
    display:inline-block;
    background-color:blue;
}

http://jsfiddle.net/x11joex11/b4ZBg/

(较新的，垂直居中测试内容较多)

http://jsfiddle.net/x11joex11/sDWxN/11/

我想要做的是垂直居中红色 div 中心的蓝色高亮 DIV。有没有办法使用内联 block 而不是表格单元格来做到这一点？

包含的 div 的高度也必须是 100% 而不是设定的像素数量。

内容也将是可变高度

由于浏览器错误，我试图避免显示表格单元格，但如果这是唯一的选择，我也想知道。对此问题的任何解决方案将不胜感激。

Answer 1

内联 block 垂直居中的艺术是理解内联级元素在它们的行框内居中。因此，您需要使行高与包含框的高度匹配。

行高由包含 block 的行高设置和行的内容共同决定。

但是不能按照包含框高度的百分比来设置包含框的行高，所以没有提供解决方案。

相反，我们可以在与要对齐的内容相同的行上创建一些内容，即包含 block 的高度，使用

#container:before {
    display:inline-block;
    content: '';
    height:100%;
    vertical-align:middle;
}

这将强制行高足够高以包含该内容。

另一件需要注意的事情是 vertical-align 应用于对齐的框，而不是包含框。

结果是http://jsfiddle.net/9j95x/