如何使用 flexbox 将列表定位在中心？

Question

我有 3 个使用 flexbox 垂直堆叠的盒子。他们现在位于左侧。我想让它们在水平方向居中。我尝试了 div {margin:10px auto} 并且它有效但 css 看起来很尴尬。有没有使用特殊 flexbox 属性的更优雅的解决方案？

我想要 divs 居中。

section {
  display: flex;
  flex-direction: column;
  background-color: teal;
}

div {
  background-color: silver;
  width: 200px;
  margin: 10px;
  line-height: 75px;
  font-size: 30px;
}

<section>
 <div>apple</div>
 <div>banana</div>
 <div>pear</div>
</section>

Answer 1

你可以使用 align-items: center;

section {
  display: flex;
  flex-direction: column;
  background-color: teal;
  align-items: center;
}

div {
  background-color: silver;
  width: 200px;
  margin: 10px;
  line-height: 75px;
  font-size: 30px;
}

<section>
 <div>apple</div>
 <div>banana</div>
 <div>pear</div>
</section>

Answer 2

您可以使用 align-items: center 将 div 居中，并使用 text-align: center 将 div 中的文本居中，如下所示：

section {
  display: flex;
  flex-direction: column;
  background-color: teal;
  align-items: center;
  text-align: center;
}

div {
  background-color: silver;
  width: 200px;
  margin: 10px;
  line-height: 75px;
  font-size: 30px;
}

<section>
 <div>apple</div>
 <div>banana</div>
 <div>pear</div>
</section>

如何使用 flexbox 将列表定位在中心？

How to position list in the center using flexbox?

html

css

centering

flexbox