Flexbox 在列中水平居中固定宽度的行

Question

如何在面向列的 flexbox 中将固定宽度的行水平居中？ justify-content: center; 听起来应该可以解决问题，但它似乎不起作用。 fiddle 中的最小示例：http://jsfiddle.net/ngr06e8w/

Answer 1

您必须使用 .col{margin:0 auto;} 而不是 justify-content: center;，您就完成了。

.col {
  display: flex;
  flex-direction: column;
  width: 500px;
  padding: 15px;
  background: #ccc;
    margin:0 auto;
}
.row1 {
  height: 300px;
  width: 500px;
  background: red;
}
.row2 {
  height: 300px;
  width: 300px;
  background: blue;
}

<div class="col">
  <div class="row1">
  </div>
  <div class="row2">
  </div>
</div>

Answer 2

只需在.col

的css中添加align-items: center;

这是更新后的 Fiddle：http://jsfiddle.net/ngr06e8w/1/

Flexbox 在列中水平居中固定宽度的行

Flexbox horizontally centered fixed-width rows in column

css

flexbox