Question

我可以水平对齐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发布了这样的解决方案，但它似乎对我不起作用。

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

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

取自Simple Vertical Align Plugin。

Answer 2

查看Vertical Centering With CSS或Vertically center content with CSS或CSS Vertical Centering。第一个参考的方法3与CSS vertical center using float and clear相同。

用browsershots.org

等服务测试结果肯定是个好主意

编辑：我修改了你的CSS和标记以实现方法3：

的CSS：

* {
  margin:0;
  padding:0;
}

html,
body {
  height: 100%;
}

body {
  text-align:center;
}

#floater {
  float: left;
  height:50%;
  margin-bottom: -100px;
}

#container
{
  clear:both;
  position: relative;
  margin: 0 auto;
  width:968px;
  text-align: left;
  height: 200px;
}

...

标记：

<body>
<div id="floater"></div>
<div id="container">

...

我在这种方法中看到的缺点是使用CSS你必须提前知道内容的高度，这样你就可以将这个高度的一半的负边距应用于浮动。在示例中，我选择了200px。

See it in action

Answer 3

有几种方法可以做到这一点，但都有妥协。

使用position:absolute，固定高度和overflow:auto。
使用display:table，display:table-cell和vertical-align:middle
使用javascript

我认为选项＃2非常好。

编辑：我认为选项2不适用于IE。如果你想保持高度动态，你可能会被javascript困住。

Answer 4

使用纯CSS，如果div有固定 height，则仅可能。然后，您可以position absolute将其top和left设置为50%，将margin-top和margin-left设置为否定分别是width和height的一半。

这是SSCCE，只是复制'n'paste'n'run。边界纯粹是表现性的，其余的风格是必需的。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1909753</title>
    </head>
    <style>
        #content {
            position: absolute;
            width: 300px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-left: -150px; /* Negative half of width. */
            margin-top: -100px; /* Negative half of height. */
            border: 1px solid #000;
        }
    </style>
    <body>
        <div id="content">
            content
        </div>
    </body>
</html>

如果没有固定高度的方法，那么你需要掌握Javascript，并且在页面加载期间客户端会看到div快速转移到中间，这可能会导致“wtf？”经验。

Answer 5

创建一个样式为display: table的容器div，并在vertical-align: top

的内部元素上使用样式display: inline-block

http://jsfiddle.net/uzcrt/

的工作演示

Answer 6

如果您的主要容器的高度是流动的，您唯一可靠的选择是使用JavaScript（当然，“可靠”在这里是有争议的）。在JavaScript中，您必须首先找到容器的高度，然后是窗口高度并相应地调整顶部偏移。以下是你在jQuery中的表现：

$(function() {
    $(window).resize(function() {
        var top = $(window).height() / 2 - $('#content').height() / 2;
        top = top < 0 ? 0 : top;
        $('#content').css('top', top);
    });
    $(window).resize();
});

使CSS工作的CSS：

#content {
    position: absolute;
    /* Everything else is optional: */
    width: 960px;
    margin: 0 auto;
}

HTML：

...
<body>
    <div id="#content">Content here</div>
</body>
</html>

这仍然非常简单，如果用户启用了JavaScript，它将会起作用。

Answer 7

我认为可以在没有display: table的情况下完成。

这是一个例子：

HTML：

<div class="notificationArea">
    something
</div>

CSS：

.notificationArea
{
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 50%;
    left: 50%
}

Answer 8

用于在屏幕中间对齐元素的CSS类：

.middle{
    position: absolute;
    top: 50%; /*50% from top*/
    left: 50%; /*50% from left*/ 

    /*remove 50% of element width and height to align the element center in the position*/
    transform: translateY(-50%) translateX(-50%); 
}

现在，将此类添加到HTML元素

垂直对齐div（无表格）

8 个答案: