html - 垂直对齐 div(无表格)

Question

我可以水平对齐一个 div，所有内容看起来都不错。希望垂直对齐不包含任何表格的 div。我尝试将 margin 位置设置为 #container 内的一些负值但那种工作。我知道 CSS 还不支持这个？

这是我的标记:

body
{
    background: #777; /* gray */
    text-align: center;
}

#container 
{ 
    margin: 0 auto;
    width: 968px;
    text-align: left;
}

#toptab
{
    background: #f77; /* red */
    height: 14px;
    width: 968px;
}

#middletab
{
    background: #7f7; /* green */
    width: 968px;
}

#data
{
    width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */
    padding-left: 10px; 
    padding-right 10px;
}

#bottomtab
{
    background: #77f; /* blue */
    height: 14px;
    width: 968px;
}

<div id="container">
    <div id="toptab"></div>
    <div id="middletab">
        <div id="data">
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
        </div>
    </div>
    <div id="bottomtab"></div>
</div>

运行上面的代码片段并单击“完整页面”以查看它当前的外观。基本上，它在水平方向上看起来很棒，但现在我还需要它在页面中垂直居中。

我想要垂直对齐的元素是#container div。该效果将强制整个 div 和所有子 div 不仅水平对齐而且垂直对齐。我知道这是可能的，我知道 Andy Budd 发布了这样的解决方案，但它似乎对我不起作用。

Answer 1

除非您能够显式设置容器的高度(看起来并非如此)，否则没有跨浏览器的解决方案可以让您的 DIV 容器垂直居中。

使用表格是完全可行的，但是你已经注意到这个不能使用了。

如果 javascript 是一个选项，我们可以很容易地为您解决这个问题。已经存在用于垂直对齐容器的 jQuery 插件。

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = (ph - ah) / 2;
            $(this).css('margin-top', mh);
        });
    };
})(jQuery);

你会像这样垂直对齐 DIV block :

$('#example').vAlign();

取自Simple Vertical Align Plugin .