Как разместить список в центре, используя flexbox?

Question

У меня есть 3 ящика, которые сложены вертикально, используя flexbox. Теперь они расположены слева. Я хочу центрировать их в горизонтальном направлении. Я попытался div {margin: 10px auto}, и это работает, но CSS выглядит неловко. Есть ли более элегантное решение, использующее специальные свойства flexbox?

Я хочу, чтобы div в центре.

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

Вы можете центрировать div, используя align-items: center, и центрировать текст внутри div, используя text-align: center следующим образом:

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>

Answer 2

Вы можете использовать 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>