div margin auto 中的中心 div 不起作用[重复]答案

【问题标题】：Center div in div margin auto doesn't work [duplicate]div margin auto 中的中心 div 不起作用[重复]
【发布时间】：2018-03-30 05:11:22
【问题描述】：

您好，我有以下代码： CSS

.center{
    width: 100%;
    margin: 0 auto;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Ahoj</p>
             </div>
        </div>
    </body>
</html>

我也尝试了.center 没有width: 我在这里搜索了主题但我没有找到解决方案。 .nav div 仍然停留在左侧。感谢您的帮助。

【问题讨论】：

您是否尝试将margin: 0 auto; 添加到.nav 然后设置text-align: center ？
@Krusader 谢谢！这行得通！
我在下面添加了一个答案，如果对您有帮助，请考虑将其作为答案。

标签： html css

【解决方案1】：

.nav {
background: #606060;
width: 90%;
display: block;
margin: 0 auto;

}

【讨论】：

解释在哪里，只是转储代码不是一个好答案
完全没问题？您能描述一下解决方案吗？解释为什么这个 CSS 代码应该工作。我只能看到 CSS 代码（没有 sn-p，格式不正确）。我（我不是反对者）
抱歉，我认为这样的问题不需要完整的教程。从什么时候 stackoverflow 成为一个教程杂志？
阅读帮助：stackoverflow.com/help/how-to-answer
感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。一个正确的解释would greatly improve 其长期价值，通过展示为什么这是解决问题的好方法，并将使其对有其他类似问题的未来读者更有用。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案2】：

将margin:0 auto 给.nav 类而不是.center 类。

.center{
  width: 100%;   
  border: 1px solid red;
}

.nav{
  background: #606060;
  width: 90%;
  margin:0 auto;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Ahoj</p>
             </div>
        </div>
    </body>
</html>

【讨论】：

【解决方案3】：

你不需要定义 margin: 0 auto;当宽度为 100% 时。如果要将固定宽度的分区定位到父div的中心，则需要它。

.center{
    width: 100%;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
    margin: 0 auto;
}

<div class="center">
     <div class="nav">
        <p>Ahoj</p>
     </div>
</div>

【讨论】：

【解决方案4】：

将此 CSS 添加到您的 .nav 类中

.nav {
 .
 .
 margin: 0 auto;
 text-align: center
}

【讨论】：

【解决方案5】：

块级元素不能居中，因为它总是适合其容器的100% 宽度，所以我建议改用inline-block。

.center{
    width: 100%;
    margin: 0 auto;
    border: 1px solid red;
    text-align:center;
}

.nav{
    background: #606060;
    width: 90%;
    display:inline-block;
}

        <div class="center">
             <div class="nav">
                <p>Ahoj</p>
             </div>
        </div>

【讨论】：