垂直对齐div（无表格）

小编典典

垂直对齐div（无表格）

css

我可以水平对齐div，所有内容看起来都不错。寻找垂直对齐不包含任何表格的div。我尝试在#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发布了这样的解决方案，但它似乎对我不起作用。

阅读 210

2020-05-16

共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块：

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

2020-05-16