CSS“margin：0 auto”不居中

Posted 2023-03-05

【中文标题】CSS“margin：0 auto”不居中

【英文标题】：CSS "margin: 0 auto" not centering

【发布时间】：2016-06-19 10:19:57

【问题描述】：

好的，我了解该主题已涵盖。但我研究了各种解决方案，但收效甚微。

我只是不知道为什么这个margin: 0 auto; 不起作用。我尝试用width: calc(33% - 40px); 补偿填充，但这不起作用。

任何有关为什么会发生这种情况的帮助以及解决方案将不胜感激！

.container 
  margin: 0 auto;


[class*='col-'] 
  float: left;


.col-2-3 
  width: 66.66%;


.col-1-3 
  width: 33.33%;


.grid:after 
  content: "";
  display: table;
  clear: both;


.col-word 
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;

<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>

    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/xm2gvzbf/5/

【参考方案1】：

您应该在.container 上设置一个宽度以让margin: 0 auto; 工作。请参阅updated JSfiddle。

【参考方案2】：

它正在工作。

问题是您将div 居中，默认情况下它是块级元素，因此占据其父元素（body，在本例中）的 100% 宽度。所以没有空间可以水平移动，因此没有空间居中。

有关插图，请参阅此revised demo，它在.container 周围添加了边框。

如果您减小.container 的宽度，您将看到居中工作。这是第二个revised demo，width: 50% 应用于.container。

【讨论】：

谢谢，这很有帮助！但这就是问题所在。我确实希望它在 90% 左右。由于页面上显示的数据会有很大差异。有时数据会占据页面的 90%，而其他数据会占据页面宽度的 20%。这个问题有方法解决吗？无论哪种方式，我都希望它看起来居中。我担心强制像 500px 这样的固定宽度。它不会对各种数据做出响应。

你可以把.container做成一个flexbox，然后让内容居中。那你就不用担心width 的.container 了。 ***.com/a/33049198/3597276

【参考方案3】：

它确实有效，但没有指定宽度，它需要 100%。尝试类似：

   .container 
    margin: 0 auto;
    width:50%;
    

希望对你有帮助

【参考方案4】：

您应该指定 div 的宽度，以便 margin:auto 起作用。尝试使用百分比宽度来使您的 div 也响应。

【参考方案5】：

另一个对我有用的解决方法是更改​​父级的显示：在 CSS 中内联并设置最大宽度，以便边距自动居中文本。到目前为止，这已经解决了这个问题。不确定这是否是最好的解决方案，但它目前正在工作。请看下面的代码：

.parent-container
    display: inline;
    max-width: 500px;
    padding: 20px; 
    margin: 0 auto;