html - 如何在容器内的 div 中居中放置 div？

Question

我正在使用 Materialise CSS 前端框架并使用 margin: 0 auto;就像我一直做的那样，让这个 div 在它的父级中居中做了一个噩梦。给了什么？

.outer {
  border: 1px solid red;
  height:100px;
}

.inner{
  border: 1px solid black;
  height:50px;
  margin: 0px auto;
}

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container">
  <div class="row outer">
    <div class="col l6 inner">
    </div>
  </div>
  
</div>

http://codepen.io/kinsdotnet/pen/mEYJVg

Answer 1

Materialise 使用 float 元素的网格系统。您不能在 float 元素上使用 margin: auto。

您需要使用网格的偏移类，或者重新排列网格和该子元素...

( http://codepen.io/jmsherry/pen/OXYVRL <-- 那样)

另外，不要听信 !important 和 Absolute 定位这些非常糟糕的建议。有更好的方法来做到这一点......