flex设置一行文字居中，两行或者多行同样居中

• HTML 部分

<ul class="test">
        <li class="item">
            <div class="left">
            </div>
            <div class="right">
                <div class="content">我是第一行</div>
                <div class="content second">我是第二行</div>
            </div>

        </li>

        <li class="item">
            <div class="left">
            </div>
            <div class="right">
                <div class="content">我是第一行</div>
            </div>

        </li>
    </ul>

• CSS 部分

.test {
    width: 300px;
    margin: 0 auto;
}

.item {
    height: 40px;
    display: flex;
}

.left {
    flex: 1;
    height: 40px;
    border: 1px solid red;
    background-color: yellow;
}

.right {
    flex: 1;
//----垂直方向自动居中---//
    display: flex;
    justify-content: center;
    flex-direction: column;
//------------------------------//
    height: 40px;
    border: 1px solid black;
    background-color: green;
}

.content {
    font-size: 15px;
    text-align: center;
    height: 20px;
    line-height: 20px;
}

.second {
    background-color: blueviolet;
}