使用 flexbox 使内容居中而不并排放置元素

Question

我正在使用 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 在另一个位置之上。

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

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

使用 flexbox 使内容居中而不并排放置元素

Use flexbox to center content while not making elements side by side

html

css

centering

flexbox