CSS - flex元素的中心容器

Question

我在这里有一个codepen - https://codepen.io/anon/pen/RMdYyG

非常简单，但我被困住了。

我有3个元素彼此相邻并使用inline-flex。

我需要将3个元素的容器水平居中放在页面中间。

我认为我可以使用margin: 0 auto;

进行简单的操作

.page{
  border: 1px solid red;
}
.con{
  border: 2px solid green;
  display: inline-flex;
  text-align: center;
  margin: 0 auto;
}
.con > div{
  background: red;
  color: white;
  height: 50px;
  width: 50px;

}

Answer 1

您可以执行VXp所说的内容，也可以将text-align: center添加到您的网页类中：

.page{
  border: 1px solid red;
  text-align: center;
}