垂直对齐 div（无表格）答案

【问题标题】：Vertically align div (no tables)垂直对齐 div（无表格）
【发布时间】：2010-12-26 22:55:48
【问题描述】：

我可以水平对齐一个 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>

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

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

【问题讨论】：

您的意思是垂直分布/对齐还是仅将页面中垂直显示的内容居中？
@Eric 最终结果是带有内容的圆形框应位于页面中间。截至目前，您看到内容居中，但仅居中于顶部。我需要将它直接放在页面中间。
据我所知，除非你想要一个固定高度的页面，否则你必须做一些 javascript，我对此表示怀疑。

标签： html css alignment

【解决方案1】：

在屏幕中间对齐元素的 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 元素中

【讨论】：

【解决方案2】：

创建一个样式为display: table 的容器div，并在display: inline-block 的内部元素上使用样式vertical-align: top

http://jsfiddle.net/uzcrt/ 的工作演示

【讨论】：

【解决方案3】：

我认为没有display: table也可以做到。

这是一个例子：

HTML：

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

CSS：

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

【讨论】：

什么意思？你的 CSS 中有一个 display: table 规则，它的 div 无论如何都不是垂直居中的......
演示出于某种原因显示了另一个示例。我用实际代码替换了它。

【解决方案4】：

看看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.

【讨论】：

我不需要任何我读过很多的文章。我似乎无法让它与负边距值一起工作。
如果主题森林不可用，则此响应将不充分。您是否介意将说明迁移到您的答案中，并感谢原始作者。这样人们就不必从一个页面跳到另一个页面来衡量您的回复的价值？
@Jonathan > 好点子，虽然我不喜欢抄袭别人的东西：/
有趣的是，@JohnH 对我的链接投了赞成票，而当我忙于实施其中一项链接的技术时，我却被否决了
不是我格雷戈里！！！感谢您的时间和精力。我希望我能接受 2 个答案！

【解决方案5】：

对于纯 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?”经验。

【讨论】：

【解决方案6】：

除非您能够显式设置容器的高度（看起来并非如此），否则没有跨浏览器解决方案可将您的 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。

【讨论】：

@cballou 我无法判断容器的高度，它可能会有所不同:(。但如果我假设它的最大高度是 500px 的话。使用标记提供了我能做什么？
我试过这个没有运气#container { margin:0 auto;宽度：968px；文本对齐：左；位置：绝对；最高：50%；左：50%；高度：484px；边距顶部：-9em； /*设置为你身高的 1/2 的负数*/ margin-left: -15em; /*设置为宽度的负数 1/2*/ }
@JonH：如果它没有固定高度，那么如果没有 javascript，您将无法使其垂直居中。
@cballou 为此 +1！我唯一的问题是我对 JQuery 的工作不多。我知道该功能需要在 head 标签内，我是否只包含 jquery.js ？
难道不能通过 vanilla Javascript 实现垂直对齐，而无需使用 jQuery？还是只是使用 jQuery 更容易？

【解决方案7】：

如果您的主容器的高度是可变的，那么您唯一可靠的选择是使用 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：

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

还有 HTML：

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

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

【讨论】：

我对这个函数的唯一不满是它只有在元素是 BODY 标签的直接子元素时才能正常工作。我发布的插件利用它的父容器来计算居中位置。

【解决方案8】：

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

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

我认为选项 #2 很不错。

编辑：我认为选项 2 在 IE 中不起作用。如果你想保持高度动态，你可能会被 JavaScript 卡住。

【讨论】：

妥协跨浏览器兼容性：确切地说是整个 IE 系列。
@cballou，是的，我只是想到了这一点，并在您发表评论时正在编辑我的帖子：P