CSS中如何垂直对齐文本

一、介绍

CSS中如何垂直对齐文本？是前端开发中常见的问题。当有两个或多个元素需要垂直对齐时，我们该如何实现呢？这篇文章将会介绍使用CSS实现垂直对齐文本的方法，以及它们的优缺点。

二、基于行高的垂直居中

最简单的方式是使用CSS的line-height属性。该属性定义每行之间的距离，可以通过设置与元素高度相等来实现垂直居中对齐。

    <div class="box">
        <p>hello world</p>
    </div>

    .box{
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        border: 1px solid #ddd;
    }

    p{
        margin: 0px;
        display: inline-block;
        vertical-align: middle;
    }

上述代码中，首先我们创建了一个200×200的容器div.box，使用line-height:200px 将每行的距离设置为和div高度相等，使得p元素可以在垂直方向上对齐到中心。由于p元素是行内元素，所以使用display:inline-block 实现水平方向上的居中。vertical-align:middle 则实现了p元素的垂直居中对齐。

优点：该方法简单易懂，容易实现；

缺点：当元素的内容过多时，使用该方法容易导致文本行距不统一，造成阅读不方便。

三、基于flex的垂直居中

使用Flexbox布局可以方便地实现垂直居中对齐。

    <div class="box">
        <p>hello world</p>
    </div>

    .box{
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ddd;
    }

    p{
        margin: 0px;
    }

上述代码中，我们使用flex布局实现div.box元素的水平居中和垂直居中对齐。

优点：使用flex布局可以实现更复杂的布局，并且可以避免上面提到的基于行高的方法容易出现文本行距不统一的问题；

缺点：需要浏览器对Flexbox布局进行支持，旧的浏览器可能无法兼容。

四、基于表格的垂直居中

使用表格元素可以在很多场景下方便地实现垂直居中对齐。

    <table>
        <tr>
            <td><p>hello world</p></td>
        </tr>
    </table>

    table{
        width: 200px;
        height: 200px;
        border-collapse: collapse;
        border: 1px solid #ddd;
    }

    td{
        text-align: center;
        vertical-align: middle;
    }

    p{
        margin: 0px;
    }

上述代码中，我们使用 table、tr、td 等表格元素实现垂直对齐。

优点：与Flexbox布局一样，使用表格元素可以简单而方便地实现垂直居中对齐；

缺点：使用表格元素可能会对内容结构造成问题，并且表格元素本身的语义并不涉及其他部分的内容和样式。

五、结论

本文介绍了三种常见的 CSS 方法来实现垂直居中对齐，在实际的开发中，我们可以根据具体的场景来选择不同的方法来实现垂直对齐效果。

    <div class="box">
        <p>hello world</p>
    </div>

    .box{
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ddd;
    }

    p{
        margin: 0px;
    }