将 div 元素置于另一个 div 元素的中心

Question

我尝试将 div 置于另一个 div 的中心。我看到了 Manoj Kumar 对此的回应 question。但是没用。

<div class="row">
  <div class="col-sm-9">
    <div class="contAin">
        <div class="tile">Some Content</div>
    </div>
</div>
</div>

和css

.tile {
  margin-bottom: 30px;  
  width: 80%;
}

.contAin {
  display: flex;
  justify-content: center;
}

内部 div 只是向左对齐。

Answer 1

删除 display: flex 并改为对 .tile 使用此 CSS 规则：

.tile {
  width: 80%;
  margin: 0 auto 30px;
}

片段

.tile {
  margin: 0 auto 30px;  
  width: 80%;
}

<div class="contAin">
    <div class="tile">Some Content</div>
</div>

Answer 2

您可以将 margin-left:auto 和 margin-right:auto 添加到相同的 css class 并检查。

因此，CSS 变为：

.tile {
  margin-bottom: 30px;  
  width: 80%;
  margin-left:auto;
  margin-right:auto;
}

Answer 3

我在 jsfiddle 中试过了，效果不错 http://jsfiddle.net/say2vnxb/

.tile {
  margin-bottom: 30px;  
  width: 80%;
  background: yellow;
}

.contAin {
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

你用什么浏览器？

Answer 4

在 CSS 代码中试试这个：

.tile  {margin-right: auto;margin-left: auto;}

将 div 元素置于另一个 div 元素的中心

Centering a div element within another div element

css

flexbox

twitter-bootstrap