Html 堆叠div对齐中心

我使用的是Google Material Design Lite html主题中的卡片元素

我的卡片挨着一张，并与页面左侧对齐。我希望卡片与页面中心对齐，同时保持堆叠功能，以获得响应性视图

简而言之，我有两个部门：

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

（我简化了相关代码-删除了材质设计主题引用）

---

但是，我的卡仍然与左侧对齐。

调整内容

是flex父属性，而不是flex子属性。将其移动到父级，它将按预期工作。

justify content

是flex父级属性，而不是flex子级属性。将其移动到父级，它将按预期工作。

移动

对齐内容：中心到父级，以便对齐其中的内容

真的帮助我以直观的方式理解Flexbox
 移动
对齐内容：中心到父级，以便对齐其中的内容

真的帮助我以直观的方式理解Flexbox
 我一直在广泛地使用flex，但这张备忘单仍然非常有助于理解flex，以便能够解释其他人。谢谢我一直在广泛地使用flex，但这张备忘单仍然非常有助于理解flex，以便能够解释其他人。谢谢
.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;
}