Question

我设法通过输入＆＃34; margin-left：12％＆＃34;水平居中我的div（id =＆＃34; div_below_nav＆＃34;）。根据我的理解，div通常使用＆＃34; margin-left：auto＆＃34; ＆安培; ＆＃34; margin-right：auto＆＃34;。我尝试了这个，但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和position:absolute

，

left:0将与right:0一起使用

jsfiddle

＆＃13;

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

＆＃13;

<div id="div_below_nav">

＆＃13;

Answer 2

绝对定位的元素无法使用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;
}

Answer 3

你正在使用＆＃34; position：absolute＆＃34;，这意味着你的位置绝对是你告诉我的，不用猜测。

从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中使用绝对位置。随着这条线消失，你可以使用＆＃34; margin-left：auto＆＃34;。

关于标准屏幕尺寸＆＃34;的工作原理。它与10年前的答案不一样，并且从现在起5年后也不会是同样的。我们尝试跟上标准并尽可能保持代码尽可能通用，以涵盖许多用户类型。使用绝对分辨率时，要记住许多潜在用户的屏幕尺寸（宽度，高度）是一件好事。

我经常使用w3schools.com，他们总是有很好的答案。以下是今天用户的屏幕尺寸链接：http://www.w3schools.com/browsers/browsers_display.asp

为什么我要键入＆＃34; margin-left：12％＆＃34;以我的div为中心？

3 个答案: