似乎永远无法理解 margin: 0 auto;答案

【问题标题】：Can't seem to ever understand margin: 0 auto;似乎永远无法理解 margin: 0 auto;
【发布时间】：2015-04-26 21:30:12
【问题描述】：

据我了解，您只需要保证金：0 auto;使内容居中的是：

显示：块；
没有浮动
无绝对定位
还有一个固定的宽度

关于为什么这不起作用的任何想法？

我可以应用 text-align: center，这将居中，但我只想用边距居中。任何想法。

Here is the pen:http://codepen.io/anon/pen/JovwoJ

【问题讨论】：

哪个浏览器和版本？
Chrome 和 Firefox，最新版本。

标签： positioning centering margins

【解决方案1】：

您已将包装器设置为 100% 宽度。这样，Margin: 0 auto; 将通过将左右边距设为 0 来自动居中包装器，因为它已经占据了整个页面。您可以将包装器设置为width: 90%;，或除 100% 以外的任何值以使其正确居中。

此外，包装器内部的 div 都是块元素，这意味着它们将占据包装器的整个宽度。这就是为什么即使它以 Alex W 的答案正确居中，也不是我们的标准居中的原因。

编辑：我发布这个是因为之前的答案在编辑之前没有提到包装器宽度问题，而且我还不能制作 cmets。

【讨论】：

【解决方案2】：

它正在工作，你只是没有其他元素环绕它来查看它是居中的，并且它的 width 设置为 100% 所以你看不到它是居中的，因为它占用了全宽。

HTML 和 CSS：

    .wrapper
    {
    	width: 80%;
    	margin: 0 auto;
    	display: block;
    }

    <div style="width:100%">
    <div class="wrapper">
    
        <div class="nav-bg">
          <div class="nav">
            <a href="">Solar Panel Kits</a>
            <a href="">Solar Water & Pool</a>
            <a href="">Portable Solar</a>
            <a href="">Solar Panels</a>
            <a href="">Solar System Parts</a>
            <a href="">Emergency Solar</a>
            <a href="">Sale</a>
          </div>
        </div>
        
        <div class="info1-bg">
          <div class="info">
            <div class="inner2">
              <b>Free Delivery Wordwide</b>
              <b>At vero eos et accusamus et iusto odio dignis</b>
            </div>
          </div>
    
          <div class="info2">
            <div class="inner2">
              <b>Free Return For 90 Days</b>
              <b>At vero eos et accusamus et iusto odio dignis</b>
            </div>
          </div>
    
          <div class="info3">
            <div class="inner2">
              <b>Discount On Order Gift</b>
              <b>At vero eos et accusamus et iusto odio dignis</b>
            </div>
          </div>
    
          <div class="slider">
            <img src="">
          </div>
          <div class="learnSolar">
            <div class="learn1">
              <b>Get Insight On</b>
              <b>Solar Basics</b>
            </div>
            <div class="learn1">
              <b>Get Insight On</b>
              <b>Solar Rebates</b>
            </div>
            <div class="learn1">
              <b>Schedule A Free</b>
              <b>Solar Analysis</b>
            </div>
          </div>
    
          <div class="footer-bg">
            <div class="footer">
              <a href="">Customer Service</a>
              <a href="">Contact Us</a>
              <a href="">Blog</a>
              <a href="">Links</a>
              <a href="">Learn More</a>
              <a href="">FAQ</a>
              <a href="">About Us</a>
            </div>
          </div>
        </div>
    </div>
    </div>

text-align 只是将display:inline 元素置于wrapper div 内的中心。

【讨论】：