css3怎么让两个不一样高的盒子垂直居中呢？

img

代码部分

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

 <style>
        .father {
            padding: 15px 20px;
            display: flex;
            border:1px solid black;
            max-width: 400px;
        }

        .son1 {
            width: 100px;
            height: 30px;
            background-color: red;
        }

        .son2 {
            width: 100px;
            height: 50px;
            background-color: rgb(0, 4, 255);
        }
    </style>

给“father”类添加flex布局，如有帮助请点采纳


```javascript
 display: flex;
  align-items: center;
  justify-content: center;

```