垂直居中div到div

Question

我有一个矩形，在这个矩形的内部，我又创建了两个矩形。我想将这两个矩形恰好显示在第一个矩形的高度中间。

我想要获得的结果是蓝色正方形一半高度上的黄色和白色正方形。

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

Answer 1

使用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>