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。有没有办法这样做使用内联块而不是表格单元？

包含div的高度也是100％而非设定的像素数量。

内容也可变高度

我正在尝试避免由于浏览器错误而导致的表格单元显示，但如果它是我想知道的唯一选项。任何解决这个问题的方法都会很有意义。

Answer 1

使用内联块进行垂直居中的技巧是要理解内联级元素在其行框中居中。因此，您需要使行高与匹配框的高度匹配。

行高由包含块的行高设置和行内容的组合决定。

但是，包含框的行高不能根据包含框的高度百分比来设置，因此不提供解决方案。

相反，我们可以使用

在与我们想要对齐的内容相同的行上创建一些内容，即包含块的高度

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

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

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

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

Answer 2

您可以使用：

top: 50%;
position: relative;

#content上的

，就像这样：

#content
{
    display:inline-block;
    background-color:blue;
    position: relative;
    top: 50%;
}

福克：http://jsfiddle.net/brandonscript/sDWxN/9/

Answer 3

以下是我的快速回复：http://jsfiddle.net/H9nHh/

基本上使用：对于#container

，display:table; 对于#content，

和display:table-cell;。然后我创建了另一个带有x类的div来根据您的需要设置它。

垂直对齐内联块高100％

3 个答案: