Центрирование div внутри элемента flex

Question

Я проверил похожие посты, и они не помогают.

Я хочу, чтобы мой внутренний div появился в центре родительского div.

Например:

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

Родительский элемент div - это гибкий элемент внутри встроенного гибкого контейнера.margin: 0 auto позволяет только выравнивать по горизонтали, но мне нужно выровнять по вертикали.Высота и ширина составляют 80% от родительского div.

Как мне это сделать?

Кроме того, мне нужно будет иногда добавлять 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;
}

Я пробовал поля, justify-content, justify-items, align-content, align-items, вертикальное выравнивание.Кажется, ничего не работает.

FaceDown и FaceUp никогда не будут отображаться одновременно.Это дочерние / родные элементы внутри родительского элемента.

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%)