Stacking Divs Align Center

Question

我正在使用Googles Material Design Lite html主题https://getmdl.io/components/#cards-section中的卡元素。

我的卡片彼此相邻＆amp;对齐页面左侧。我希望卡片与页面中心对齐，同时保持响应视图的堆叠功能。

简而言之，我有两个div：

<div class="page__cards-div">
    <div class="page__card">div content...</div>
</div>

相应的CSS如下：

.page__cards-div {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.page__card {
    float: left;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
    width: 330px;
    height: 530px; 
    align-content: center;
    justify-content: center;
}

（我简化了相关代码 - 删除了Material Design主题参考资料）

然而，我的牌仍在左侧对齐。

Answer 1

将justify-content: center;移至父级，以便对齐其中的内容。

This cheatsheet帮助我以视觉方式理解Flexbox！

Answer 2

justify-content是一个flex父属性，而不是flex子属性。将它移到父级上，它将按预期工作。