【问题标题】：How can I center a div inside a div within a container?如何在容器内的 div 中将 div 居中？
【发布时间】：2016-08-22 09:52:48
【问题描述】：

我正在使用 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

【问题讨论】：

标签： html css materialize

【解决方案1】：

Materialise 使用浮动元素的网格系统。你不能在浮动元素上使用margin: auto。

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

(http://codepen.io/jmsherry/pen/OXYVRL

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

尝试将其添加到您的内部类：

float:none !important;

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

【讨论】：