如何使用FlexBox将列表放在中心位置？

Question

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

我要divs在中间。

null

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>

null

Answer 1

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

null

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>