使用 flexbox 使内容居中，而不是并排放置元素答案

【问题标题】：Use flexbox to center content while not making elements side by side使用 flexbox 使内容居中，而不是并排放置元素
【发布时间】：2017-07-17 20:05:43
【问题描述】：

我正在使用 flexbox 以 justify-content: center 将内容居中，这可以按预期工作，但 flexbox 也会将 div 并排移动，这是我不想要的。

这是一个例子

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

.content {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 10px;
}

<div class="flex">
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

如何在使用 flexbox 的同时将默认的一个 div 保留在另一个位置之上。

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

你可以设置flex-direction: column，然后你必须使用align-items: center。默认flex-direction 是row。

.flex {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.content {
  width: 100px;
  height 100px;
  color: #000;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

<div class="flex">
  <div class="content"></div>
  <div class="content"></div>
</div>

【讨论】：

【解决方案2】：

试试下面的代码，

.flex {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.content {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 10px;
}

<div class="flex">
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

【讨论】：