Centering vertically div into a div

Question

I have one rectangle and inside of this one, I have created two more. I would like to show these two rectangles exactly in the middle of the height of the first one.

The result that I would like to obtain would be the yellow and white squares in the half height of the blue square.

.space-around {
    display: flex;
    justify-content: space-around;
}

.rectangle {
    height: 100px;
    width: 200px;
    background-color: blue;
}

.rectangle-left{
    width: 20px;
    height: 40px;
    background-color: white;
}

.rectangle-right{
    width: 20px;
    height: 40px;
    background-color: yellow;
}

<div class="rectangle space-around">
  <div class="rectangle-left"></div>
  <div class="rectangle-right"></div>
</div>

The answer is not exactly the same so I would not say that it is duplicated. — bellotas, Aug 08 '18 at 19:42
[This post would be useful](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for what you try to do — Rodrigo Ferreira, Aug 08 '18 at 19:42
The difference between your question and the one that I linked is **one Div**. — Rodrigo Ferreira, Aug 08 '18 at 19:47

score 1 · Accepted Answer · answered Aug 08 '18 at 19:37

Use align-items: center

.space-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.rectangle {
    height: 100px;
    width: 200px;
    background-color: blue;
}

.rectangle-left{
    width: 20px;
    height: 40px;
    background-color: white;
}

.rectangle-right{
    width: 20px;
    height: 40px;
    background-color: yellow;
}

<div class="rectangle space-around">
  <div class="rectangle-left"></div>
  <div class="rectangle-right"></div>
</div>

Simple and it works! Thanks. I will mark it as correct in 8 minutes :) — bellotas, Aug 08 '18 at 19:40

Centering vertically div into a div

1 Answers1