为什么我必须输入“margin-left：12％”来居中我的div？
我通过输入“margin-left：12％”来设置水平居中div（id =“div_below_nav”）。据我所知，divs通常是使用“margin-left：auto”来水平居中的。&“margin-right：auto”。我试过了，但是div一路转移到左边。我很困惑，为什么会发生这种情况，如果有人能为我解释，我会很高兴。为什么我必须输入“margin-left：12％”来居中我的div？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLC Website</title>
<link rel="stylesheet" href="main3.css">
</head>
<body>
<div id="header">
<div id="nav">
<img src="../images/logo.png" id="logo" alt="logo">
<p id="logo_text">CLC</p>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Professors</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="welcome_text_div">
<p id="welcome_text">The Best Offer</p>
<p id="welcome_under_text">Truth evades a single definition and true
understanding requires a comparative perspective</p>
</div>
<div id="div_below_nav">
<p></p>
</div>
</div>
</body>
</html>`
MY CSS：
body {
margin: 0;
background-color: #e7e5e5;
}
ul {
margin-top: -50px;
}
li {
float: right;
font-weight: bold;
}
li a {
display: block;
text-decoration: none;
text-align: center;
font-family: sans-serif;
color: white;
border-right: 1px solid white;
padding: 8px;
}
li a:visited {
text-decoration: none;
color: white;
font-family: sans-serif;
}
li a:hover:not(.active) {
background-color: #333;
}
#header {
position: relative;
width: 100%;
height: 600px;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#nav {
position: absolute;
width: 100%;
height: 50px;
}
#logo {
width: 50px;
height: 50px;
}
#logo_text {
position: absolute;
display: inline;
top: -9px;
left: 55px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: bold;
}
#welcome_text_div {
position: absolute;
width: 800px;
height: 300px;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -400px;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 60px;
text-align: center;
}
#welcome_under_text {
color: white;
font-family: sans-serif;
text-align: center;
font-weight: bold;
margin-top: -50px;
}
#div_below_nav {
position: absolute;
width: 950px;
height: 300px;
margin-top: 650px;
margin-bottom: 50px;
background-color: red;
margin-left: 12%;
}`
绝对定位元件不能与margin: auto特技居中。这是因为浏览器没有为他们计算auto的概念。您的div的固定宽度为950px。您可以利用的是：
#div_below_nav {
left: 50%; /* place left edge in the middle of the parent, then... */
margin-left: -475px; /* move it half the div's width to the left again */
}
/* or simulate margin:auto with left/right: */
#div_below_nav {
left: 0;
right: 0;
}
您正在使用 “的位置是：绝对”，即意味着你的位置是阿瓦绝对是你告诉我的，没有猜测。
从您的CSS中删除该行。
如果您想要中心该div标签，只需在div标签上方放置一个中心标签即可。调试时简单，高效，易于查看。不要试图通过只使用CSS来使它变得更加困难，使用你知道的工作，哪些工作正常，哪些容易调试以便将来调试。
<center>
<div id="div_below_nav">
</div>
</center>
CSS
#div_below_nav {
width: 950px;
height: 300px;
margin-top: 650px;
margin-bottom: 50px;
background-color: red;
}
编辑：虽然选择的答案中，有很多方法可以解决这个问题。一种方法是不要在CSS中使用绝对位置。随着这条线消失，你可以使用“margin-left：auto”。
这是关于什么将工作在“标准屏幕尺寸”。这与10年前的答案不一样，从现在开始的5年不会一样。我们尽量保持标准并尽可能保持代码的一般性，以涵盖许多用户类型。当使用分辨率绝对值时，记住许多潜在用户的屏幕尺寸（宽度，高度）是一件好事。
我使用w3schools.com很多，他们总是有很好的答案。以下是当今用户屏幕尺寸的链接：http://www.w3schools.com/browsers/browsers_display.asp
Divs通常使用'margin：0 auto;'居中。 –
当我这样做，然后我的div进入屏幕的最左上角。 – noddy
尝试保证金的左右自动没有绝对定位 – Pete