如何将 div 垂直对齐到视口，同时将其水平对齐到文档？答案

【问题标题】：How can I vertically align a div to the viewport while horizontally aligning it to the document?如何将 div 垂直对齐到视口，同时将其水平对齐到文档？
【发布时间】：2012-03-21 17:33:08
【问题描述】：

我想将 HTML 中的 div 元素垂直对齐到视口的底部，同时也将同一个 div 水平对齐到文档/页面或其元素。

例如，假设我有一个这样的 div：

<html>
<head>
  <style type="text/css">
  * {
    margin: 0;
  }
  #wrapper {
    margin: 0 auto;
    width: 1000px;
    min-height: 2000px;
    background: #FF0000;
  }
  </style>
</head>
<body>
  <div id="wrapper">wrapper</div>
</body>
</html>

我想创建一个新的 div，它贴在视口底部，但与显示的 div 对齐。为简洁起见，假设我要对齐的 div 与所示的宽度相同，并且我想将它与所示的 div 左对齐。

我的幼稚尝试如下：

<html>
<head>
  <style type="text/css">
  * {
    margin: 0;
  }
  #wrapper {
    margin: 0 auto;
    width: 1000px;
    min-height: 2000px;
    background: #FF0000;
  }
  #footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 1000px;
    height: 100px;
    margin-left: -500px;
    background: #00FF00;
  }
  </style>
</head>
<body>
  <div id="wrapper">wrapper</div>
  <div id="footer">footer</div>
</body>
</html>

只要视口宽度大于 1000 像素，此解决方案就可以工作。一旦窗口小于 1000px，解决方案就会中断；页脚不再与页面的其余部分水平滚动。另请注意，如果文档比视口“高”，页脚 div 应保持固定在视口底部。

【问题讨论】：

标签： css html alignment

【解决方案1】：

您应该为此使用两个 div。第一个在页面底部与样式对齐：

.wrapper {
    position: absolute;
    bottom:0;
    width: 100%;
    background-color: red;
}

然后，页脚包装器包含的页脚包含您的实际页脚信息（我将您要在页面底部对齐的页脚称为页脚...

.footer {
    width: 50%;
    margin: 0 auto;
    background-color: green;
}

查看实际操作：

http://jsfiddle.net/C3rhX/1/

【讨论】：

感谢您的回答。不幸的是，这个解决方案没有将 div（页脚）与视口底部对齐。相反，它将它与文档/页面的底部对齐。也许我的问题的措辞不够清楚；我应该尝试改写它吗？否则，是否愿意再试一次？
啊，我不熟悉视口的概念，如果您是指这些用于移动网站的元标记视口？如果没有，那么是的，请改写它，我会再试一次！
我没有通读整篇文章，但它解释了我所说的“视口”的含义：quirksmode.org/mobile/viewports.html。我所说的“视口”本质上是浏览器窗口。
哦，当然，在这种情况下，只需制作页脚包装position: fixed;。怎么样？
请注意我希望的工作正常：jsfiddle.net/C3rhX/10。当窗口宽度

【解决方案2】：

<html>
    <head>
          <style type="text/css">
          * {
            margin: 0;
          }
          #outer
          {     
            width: 1000px;
            margin: 0 auto;
            height: 100%;
          }
          #wrapper {
            min-height: 800px;
            background: red;
          }
          #footer {
            position: absolute;
            bottom: 0;
            width: 1000px;
            height: 100px;
            background: lime;
            display: block;
          }
          </style>
        </head>
        <body>

        <div id="outer">
          <div id="wrapper">wrapper</div>
          <div id="footer">footer</div>
        </div>

        </body>
    </html>

【讨论】：

啊，关闭！这里的问题是，如果视口比文档“短”，页脚会随着文档滚动，而不是一直固定在视口上。
设置 html, body { min-height: 100%; } 应该可以解决这个问题。
这似乎不会改变我浏览器中的效果（Google Chrome 16.0.912.75）：jsfiddle.net/XTXv8