css实现多行文字垂直居中

flex方法

<div class="father">
        <div class="children">
            <span>多行文字垂直居中</span>
            <span>多行文字垂直居中</span>
            <span>多行文字垂直居中</span>
            <span>多行文字垂直居中</span>
            <span>多行文字垂直居中</span>
            <span>多行文字垂直居中</span>
            <span>多行文字垂直居中</span>
        </div>
    </div>

html,
    body {
        margin: 0;
        padding: 0;
        background-color: skyblue;

    }

    .father {
        width: 300px;
        height: 300px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
    }
.children{
    background-color:blue;
}

效果