html - CSS "margin: 0 auto"不居中

好的，我知道已经讨论了该主题。但是，我研究了各种解决方案，但对它们却收效甚微。

我只是不知道为什么这个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/

最佳答案

这是工作。

问题是您将div居中放置，默认情况下它是块级元素，因此它占据其父对象100％的宽度(在这种情况下为body)。因此，没有水平移动的空间，因此也没有居中的空间。

有关说明，请参见此revised demo，它在.container周围添加了边框。

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

关于html - CSS "margin: 0 auto"不居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35817096/