html – CSS“margin：0 auto”不居中

好的,我知道这个话题已被涵盖.但是我已经研究过各种解决方案并且几乎没有成功.

我只是不知道为什么这个保证金：0自动;不管用.我尝试用宽度补偿填充：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的中心,默认情况下它是一个块级元素,因此占据其父级(在本例中为body)的100％宽度.所以没有空间可以水平移动,因此没有空间来居中.

有关说明,请参阅此revised demo,其中包含.container附加的边框.

如果减小.container的宽度,您将看到居中的工作.这是第二个revised demo,宽度：50％应用于.container.