Question

如何将页面内容集中在一起，使其以每种屏幕尺寸为中心？例如，在Allegorithmic上，如果我调整浏览器大小，则中心内容将向左移动，直到到达浏览器窗口。某些背景元素无限水平延伸（顶部为深灰色，中间为浅灰色等）。我可以在我的笔记本电脑和iMac上打开这个网站，它是居中的。我想我可能会使用绝对定位从左侧移动内容x像素数量，但这不起作用，因为在小屏幕上将内容居中的300像素不会将其放在大屏幕上。

所以从本质上讲，我想复制Allegorithmic网站的功能，水平无限的背景，但是某些内容始终保持“居中”。

Answer 1

如果您希望元素始终居中，请在其中的样式中使用margin: 0 auto;。

#yourElement{
    margin: 0 auto;
}

<强> W3.org reference for centering things using CSS

要获取背景元素以扩展整个页面长度，只需给它们100％的宽度，然后在其中创建一个子容器并为它们提供与上面相同的样式。我敢打赌，你给出的例子只是使用1px高度的线条来获得背景上的外观。

<强> Example

<强> Example with image bg

<强>标记

<div id="background">
    <div id="content">
    </div>
</div>

<强> CSS

#background{ 
    width: 100%;
}
#content{  
    width: 960px;
    margin: 0 auto;
}

Answer 2

试试这个 -

.center{
    margin: 0 auto;
    position: relative;
}

auto应将页面内容与中心对齐，留下空格（左，右），具体取决于浏览器调整大小。

Answer 3

您可以为每个“级别”定义带有内部div的容器。

<div id="first" class="container"><div class="inner">
  first content goes there
</div></div>
<div id="second" class="container"><div class="inner">
  another content goes there
</div></div>
...
...
...

并使用css设置样式，使用id为每个容器的自定义样式（这些是100％宽，因此它们具有完整的bg）

.container {
  background: red;
  text-align: center;
}
.container > .inner {
  margin: 0 auto;
  width: 960px;
  text-align: left;
}

Answer 4

HTML

<div id="wrapper">
   <header>
      <nav>
        ....
      </nav>
   </header>

   <div id="main">
       .....
   </div>
</div>

CSS

#wrapper {
  width: 960px /* whatever you wanted but there has to be a width*/
  margin: 0 auto;  
}

这将包装并居中整个页面内容。

希望这有帮助。

Answer 5

我在这里有一些例子你可以看一下。第一个（红盒子）我相信你正在寻找。 http://jsfiddle.net/kYCWX/

HTML / CSS内容始终居中

5 个答案: