无高度内容垂直居中

<!DOCTYPE html>
<html>
<body>
    <style>
        .title {
            font-size: 18px;
        }
        .container {
            background-color: lightblue;
            width: 300px;
            height: 300px;
        }
        .content {
            font-size: 16px;
            font-weight: 600;
        }
    </style>

    <h1 class="title">table</h1>
    <section class="container" style="display:table-cell; vertical-align: middle;">
        <div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
    </section>

    <h1 class="title">grid</h1>
    <section class="container" style="display:grid; align-items: center;">
        <div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
    </section>

    <h1 class="title">transform</h1>
    <section class="container" style="position: relative;">
        <div class="content" style="position: absolute; top: 50%; transform: translateY(-50%);">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
    </section>

    <h1 class="title">flex</h1>
    <section class="container" style="display: flex; align-items: center;">
        <div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
    </section>
</body>
</html>
来源：https://www.cnblogs.com/ljwk/p/11913616.html
标签
垂直居中