html - 使用 @media 将 div 居中

Question

制作一个我希望可针对移动设备进行扩展的网站。尽管我尝试了很多方法，但我不知道如何使这项工作有效。

这是我的代码:

<div class="vertical-white">


<div class="content-container">

    <div class="horizontal-3">
      <div class="kamer-foto">
        1
      </div>

      <div class="kamer-text">
        <a href="#" class="button-room">Lees meer</a>
      </div>
    </div>

    <div class="horizontal-3">
      <div class="kamer-foto">
        2
      </div>

      <div class="kamer-text">
        <a href="#" class="button-room">Lees meer</a>
      </div>
    </div>

    <div class="horizontal-3">
      <div class="kamer-foto">
        3
      </div>

      <div class="kamer-text">
        <a href="#" class="button-room">Lees meer</a>
      </div>
    </div>

  </div>
</div>

然后这是我的 CSS:

.vertical-white {
  display: block;
  width: 100%;
  min-height: 400px;
  background-color: white;
}

.content-container {
  overflow: auto;
  width: 66%;
  max-width: 980px;
  min-width: 720px;
  min-height: 400px;
  background-color: rgba(0, 28, 44, 0.5);
  margin: 0 auto;
}

.horizontal-3 {
  display: block;
  float: left;
  width: 28%;
  min-width: 200px;
  margin-top: 5%;
  margin-bottom: 5%;
  height: 400px;
  background-color: rgba(5, 100, 20, 0.3);
  margin-left: 4%;
}

@media screen and (max-width: 720px) {
  .horizontal-3 {
    width: 250px;
    float: none;
    margin-left: 0 auto;
    margin-right: 0 auto;
  }
  .content-container {
    min-width: 300px;
  }
}

当屏幕小于 720px 时，divhorizo​​ntal-3 不居中。 float 不为空，边距设置为零，显示也是 block 的。为什么不居中？

Answer 1

最重要的是，它不是 margin-left: 0 auto 和 margin-right: 0 auto，而只是 margin: 0 auto或 margin-left: auto 和 margin-right: auto，即单个参数的 ONE 值或简写参数的组合值。 (参见此处:http://codepen.io/anon/pen/qrbNZZ)