为什么我必须输入 "margin-left: 12%" 才能使我的 div 居中？

Question

我设法通过键入 "margin-left: 12%" 使我的 div (id="div_below_nav") 水平居中。据我了解，div 通常使用 "margin-left: auto" 和 "margin-right: auto" 水平居中。我试过了，但是 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>`

我的 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%;
}`

Answer 1

绝对定位的元素不能用 margin: auto 技巧居中。那是因为浏览器没有为他们计算auto的概念。

您的 div 的固定宽度为 950 像素。您可以利用它：

#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;
}

Answer 2

如果设置 left:0 和 right:0

，

margin:auto 与 position:absolute 一起使用

jsfiddle

body {
        width: 100%;
        height: 100vh;
        margin: 0;
}

#div_below_nav {
        background: red;
        position: absolute;
        width: 80%;
        height: 50px;
        left: 0;
        right: 0;
        bottom: 50px;
        margin: auto;
}

<div id="div_below_nav">

Answer 3

您使用的是"position: absolute"，这意味着您的立场永远是您告诉我的，没有猜测。

从您的 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"。

这是关于 "standard screen size" 上的工作原理。这与 10 年前的答案不同，5 年后也不会相同。我们努力跟上标准并使代码尽可能通用以涵盖许多用户类型。使用绝对分辨率时，最好记住许多潜在用户的屏幕尺寸（宽度、高度）。

我经常使用 w3schools.com，他们总是有很好的答案。随着岁月的流逝，这里是当今用户的屏幕尺寸 link：http://www.w3schools.com/browsers/browsers_display.asp

为什么我必须输入 "margin-left: 12%" 才能使我的 div 居中？

Why do I have to type "margin-left: 12%" to center my div?

html

css

center