Question

我已经检查了类似的帖子，但它们没有帮助。

我希望最里面的div出现在父div的中心。

例如：

<container>
  <div class="parent">
    <div class="child">
    </div>
  </div>
</container>

父div是inline-flex容器内的flex项。 margin: 0 auto仅允许它水平对齐，但我也需要它垂直对齐。高度和宽度是父单位的80％。

我该怎么办？

此外，我有时需要添加一个display: none。当我不希望display: none处于活动状态时，我可以将显示状态保留为什么？

编辑：

.Card {
    width: 150px;
    height: 220px;
    border: 2px solid rgb(218, 186, 186);
    margin: 10px;
    display: inline-flex;
}

.FaceUp {
    display: none;
}

.FaceDown {
    height: 80%;
    width: 80%;
    margin: 0 auto;
}

我尝试了margin，justify-content，justify-items，align-content，align-items，vertical-align。似乎没有任何作用。

FaceDown和FaceUp将永远不会同时显示。它们是父div中的子div /兄弟div。

Answer 1

您是否尝试撰写：

 parentDiv {
  display: flex;
  justify-content: center;
  align-content: center;
 }

 childDiv {
  align-self: center;
 }

因为每个父母都应该有display: flex;才能影响孩子

Answer 2

尝试

position: absolute;
top: 50%;
transform: translateY(-50%)

将div居中于弹性项目内

2 个答案: