如何使我的网站位于页面中心答案

【问题标题】：How can I make my site in the center of the page如何使我的网站位于页面中心
【发布时间】：2011-04-07 08:11:33
【问题描述】：

我制作了一个 CSS 模板
我想把它放在页面的中心当我打开浏览器它出现在页面的左侧请帮忙

【问题讨论】：

标签： css

【解决方案1】：

您需要像这样使用margin:auto 和指定的width：

#wrapper{
  margin:auto;
  width:1000px;  /* adjust width */
}

#wrapper 应该是页面上的主要容器元素。

【讨论】：

这有一个常见的陷阱，使居中的 div 在页面之间向左跳几个像素，具体取决于滚动条是否处于活动状态。这里给出了一个通用的解决方案stackoverflow.com/questions/1202425/…
值得注意的是，这也会影响#wrapper的上下边距。

【解决方案2】：

用户

body{
  margin:0 auto;
}
or top root parent id

#parentid{
margin:0 auto;
}

【讨论】：

【解决方案3】：

要使其正确居中，包装器需要设置宽度，并且我们需要将左右边距设置为自动。

#wrapper {
width: 960px; /* set to width of content */
margin: 0 auto;
}

Sarfraz 在正确的页面上，但没有理由将顶部和底部边距设置为自动。我们应该只影响获得我们想要的结果所必需的属性。

【讨论】：

【解决方案4】：

我的方法与已经在这里的方法略有不同，所以这是我的建议。

div#wrapper {
    width: 960px;
    position: absolute;
    left: 50%;
    margin-left: -480px;
}

#wrapper 是一个包含您网站主要内容的 div。

margin-left 应该等于宽度的一半。

【讨论】：

这个解决方案比margin-left:auto; margin-right: auto;有什么优势吗？
这是一个很好的垂直居中的解决方案，但似乎没有必要通过绝对定位将整个包装器从标准流程中取出。此外，还有更简单的解决方案不是黑客攻击。
RE: Brian - 如果你不想让它脱离流程，你可以使用 position: relative;然后 div 后面的任何东西都会出现在它应该出现的地方。它已经很简单了，所以我不会将其定义为 hack。 RE：艾莉森——我不认为使用任何一个都有优势/劣势。这就是我一直这样做的方式，它一直对我有用。
@diggersworld 冒着听起来粗鲁的风险，这个解决方案对我来说似乎并不优雅
@diggersworld，这一直是不必要的。当我可以使用 2 种样式、宽度和边距时，我为什么要这样做？

【解决方案5】：

将左右边距指定为auto，并设置正文的宽度：

body {
    margin-left: auto;
    margin-right: auto;
    width: 780px;
}

我选择了 780px 作为宽度，但是你可以放任何你想要的。以其他单位（例如 em、%）指定也应该有效。

【讨论】：