垂直居中背景答案

【问题标题】：center background vertically垂直居中背景
【发布时间】：2014-03-23 01:23:47
【问题描述】：

您好，我正在尝试将背景图像的中心保持在屏幕的中心即使浏览器的大小调整得非常小。我可以水平而不是垂直地做到这一点。我创建了一个小提琴链接来演示（如果您调整浏览器的大小您可以看到水平居中的背景图像。 fiddle link

这是我目前的 css 代码：

 #container {

height:450px; background-image:url('http://oi58.tinypic.com/5an82h.jpg');
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-color: #9FBBE2; }

我可以做些什么来保持背景图像垂直居中？我希望在这个 bkgrnd 图像的顶部放置另一个 div 或 table。

感谢您的帮助:)

【问题讨论】：

标签： alignment center

【解决方案1】：

问题是你的#container，它的高度是固定的，顶部没有边距，即使 bg 正确居中，它仍然会相对于窗口位于顶部。

检查这个更新的小提琴，也许可以帮助你更好地理解 http://jsfiddle.net/cCH2Z/117/

但老实说，我不认为您的解决方案是最佳选择，原因如下：

如果这个背景是整个应用程序的整个背景，为什么要把它放在#container 中？为什么不直接将其放入body 或html 元素中？
如果 #1 不正确，您仍然有更好的方法来精确控制它。将您的#container 水平划分为 2 个或更多部分，使用边距控制标题的位置关系。

<html>
  ...
  <body>
    <div id="container">

      <div id="top">
        <!-- Here goes your content need to over the top of bg -->
      </div>

      <!-- Adjust distance between #top and #center -->

      <div id="center">
        <!-- Here goes your bg and other stuff -->
      </div>

      ...
    </div>
  </body>
</html>

【讨论】：

睡梦你真棒！！ :P 谢谢。！我也会试试你的其他想法。是的，它是整个网页的背景，我希望有一个表格或 div 居中在页面的中间，其中将包括图片和文本，并且可能在顶部有一个选项卡面板。我正在努力学习，所以你的帮助是惊人的。再一次感谢你！！！ :)