文本在指定框中垂直居中，而不是水平居中

<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px; /* 指定容器高度 */
        border: 1px solid #ccc; /* 为容器添加边框 */
    }
</style>

<div class="container">
    <p>居中的文本</p>
</div>

<style>
    .container {
        display: table-cell;
        vertical-align: middle;
        height: 200px; /* 指定容器高度 */
        border: 1px solid #ccc; /* 为容器添加边框 */
    }
</style>

<div class="container">
    <p>居中的文本</p>
</div>

<style>
    .container {
        position: relative;
        height: 200px; /* 指定容器高度 */
        border: 1px solid #ccc; /* 为容器添加边框 */
    }

    .text {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

<div class="container">
    <p class="text">居中的文本</p>
</div>