盒子内容垂直居中

<div class="list">
    <div class="list-item">list item 1</div>
    <div class="list-item">list item 2</div>
</div>

.list {
    display: flex;
    align-items: center;
    height: 60px;
    background-color: red;
}
.list-item {
    margin-left: 10px;
    color: #fff;
}

父容器为弹性盒子，交叉轴居中，效果如下：