Centering a div inside a flex item

Question

I've checked similar posts and they are not helping.

I want my innermost div to appear in the center of the parent div.

For example:

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

The parent div is a flex item inside an inline-flex container. margin: 0 auto is only allowing it to horizontally align, but I need it vertically aligned as well. Height and width are 80% of parent div.

How do I go about this?

Also, I will need to add a display: none at times. When I don't want display: none active, what can I leave display as?

Edit:

.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;
}

I've tried margin, justify-content, justify-items, align-content, align-items, vertical-align. None seem to be working.

FaceDown and FaceUp will never display at the same time. They are the child/sibling divs inside the parent div.

alignment with flex is done with justify-content: center and align-content: center; which of these would be vertical center will be based on your flex-direction. — Taylor Belk, Jun 13 '19 at 12:05
These "similar" posts are not similar because they are about the position of the parent/middle div - not the inner most child... — Alice, Jun 13 '19 at 12:15
try `margin: auto;`. the `margin` property has been updated/rewritten to ‘play nicely’ with the flexbox and css grid layout modules. — chharvey, Jun 14 '19 at 02:45

score 1 · Answer 1 · answered Jun 14 '19 at 10:54

1

Did u try writing:

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

 childDiv {
  align-self: center;
 }

Because every parent should have display: flex; in order to affect a child

answered Jun 14 '19 at 10:54

pitygacio

41
6

score -1 · Answer 2 · answered Jun 14 '19 at 09:58

-1

try this

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

answered Jun 14 '19 at 09:58

Gene Rally

19
3

Centering a div inside a flex item

2 Answers2