Question

根据我的理解，你需要保证金：0 auto;中心内容是：

display：block;
没有花车
没有绝对定位
并设定宽度

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

我可以应用text-align：center，这将是中心，但我只想以边距为中心。任何想法。

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

Answer 1

它正常运作，你只是没有另外一个元素缠绕它，看它是居中的，width设置为100%，所以你看不到它居中，因为它占据了整个宽度。

HTML＆amp; CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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

编辑：我发布了这个，因为之前的答案在编辑之前没有提到包装宽度问题，而且我还没有能够发表评论。

似乎无法理解保证金：0自动;

2 个答案: