在屏幕中央居中显示div

Question

我在这里有一个名为“main”的 div： http://tallevi.net/daniel/?page_id=5 如果我更改屏幕分辨率，该 div 就不会居中，目前“main” div 的 CSS 如下：

.#main {
width: 680px;
position: absolute;
right: 35%;
padding: 0 40px 5px 40px;
font: normal 14px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
background: url(images/content_back.png) repeat-y;
}

有什么问题吗？

- Tal Levi

Answer 1

居中元素的最佳方法是使用margin: 0 auto;，尝试将您的代码更改为：

#main {
  width: 680px;
  margin: 0 auto;
  padding: 0 40px 5px 40px;
  font: normal 14px Verdana, Arial, sans-serif;
  line-height: 20px;
  z-index: 2;
  background: url(images/content_back.png) repeat-y;
}

Margin: 0 auto会为右侧和左侧设置自动边距，从而将元素居中。 （仅在指定固定宽度时才有效，而您已经指定了宽度）

- Andy

---

如果您想添加IE6兼容性，您还需要在父元素上使用text-align: center以及在#main上使用text-align: left。据我所知，IE6完全忽略margin: 0px auto。 - Katai

Answer 2

设置Div的边距margin:0 auto;并根据需要应用其他所需属性。

- Milind

Answer 3

移除div中的所有样式，并应用以下CSS：

.centerdiv
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px 5px 40px;
  font: normal 14px Verdana, Arial, sans-serif;
  line-height: 20px;
  z-index: 2;
  background: url(images/content_back.png) repeat-y;
}

- user1761123

---

你使用了类.centerdiv，但OP没有这个类。你还删除了他想要的很多样式，尽管你似乎已经进行了编辑。 - Andy

他可以在样式表中添加class centerdiv，然后在需要的时候使用它，这比将样式应用于特定元素要好。 - user1761123

好的，请搜索 http://tallevi.net/daniel/wp-content/themes/kingsize/style.css 并删除所有与 body、wrapper、main-wrap 相关的样式，只保留上面的部分。 - user1761123

谢谢你的尝试，我真的很感激。我想我会尝试使用表格解决方案，你有什么想法吗？ - Tal Levi

我认为如果它仍然在“容器”内部（向右上方）保持不变，它将无法正常工作。去掉包装器和主包装器以及所有边距设置到body中，你是否从padding: 0; margin: 0;中删除了body？ - user1761123