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;
    }