CSS"margin:0 auto"不居中

Question

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

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

Answer 1

这是工作.

问题是你是一个中心div,默认情况下是一个块级元素,因此占据其父级的100%宽度(body在本例中).所以没有空间可以水平移动,因此没有空间来居中.

有关插图,请参阅此修订版演示,其中包含附加边框.container.

如果减小宽度,.container你会看到定心工作.这里是第二个修改后的示范与width: 50%应用.container.