html - Margin 0 auto 不会让我的两个 div 居中

Question

因此，我试图将页面上的三个 div，#header、#nav 和 #headerImg 居中。我似乎无法使用 margin: 0 auto; 将我的#header 和#nav div 居中；尽管。当我刷新页面时，它们似乎卡在了我页面的左侧。

这是我页面的 style.css:

div#header{      //I only have one image here.
    position:absolute;
    padding: 10px 20px;
    width: 960px;
    height: 49px;
    top: 0px;
    background-color: #2E5E8D	
}

div#nav{         //I have 4 links here
    position:absolute;
    margin: 0 auto;
    padding: 10px 20px;
    width: 960px;
    height: 20px;
    top: 69px;
    background-color: #2E5E8D
}

div#headerImg{   //I have one image here, 
    position: relative;
    display: block;
    margin: 0 auto;
    width: 1000px;
    top: 95px;
}

div#content{
    position:relative;
    top:109px;
    width:1000px;
    display: block;
    margin: 0 auto;
}

div#content a{
    color: blue;
    text-decoration: none;
}

#content a:hover{
    color: red;
    text-decoration: underline;
}
	
#content dt{
    margin-top: 10px;
}

div#footer{
    position: relative;
    margin: 0 auto;
    top: 109px;
    background-color: #333333;
    color: white;
    text-align: center;
    font-size: 14px;
    width: 1000px;
    padding: 10px;
}

我的 #header 和 #nav 的宽度必须根据导师的要求设置为 960px，我确定他希望我的 #headerImg 中的图像位于我的 #header div 中，但我无法从重叠中获取图像。因此，这是我可以居中的 3 个 div 中的唯一一个。

我尝试在两者上都使用 margin: 0 auto; 和 display: block 但它们似乎不起作用。我尝试使用 margin: 0 10% 这似乎在我的电脑上工作，但它在另一台电脑上没有对齐。我在代码中的注释只是为了展示我在 div 中的内容。

Answer 1

尝试添加 div#header 和 div#nav 以下规则:

margin-left: -500px;
left: 50%;