如何在容器内将 div 居中放置在 div 中？

Question

我正在使用 Materialize 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 使用浮动元素的网格系统。您不能在浮动元素上使用 margin: auto。

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

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

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

Answer 2

相对内的绝对

设置外部div的位置为相对，内部为绝对。

要使 margin: 0px auto 起作用，请添加 left: 0; right:0;

另外你必须指定内部宽度div。

如果你想垂直居中，

只需替换：

margin: 0px auto

与：

margin: auto

结果：

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

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

  width:100px;
  position:absolute;
  left:0;
  right:0;
}

<!-- 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>

Answer 3

尝试将此添加到您的内心 class:

float:none !important;

看起来 class col 向左应用了一个浮动，这就是它不居中的原因

如何在容器内将 div 居中放置在 div 中？

How can I center a div inside a div within a container?

html

css

materialize

相对内的绝对

结果：