如何用CSS實現文字垂直居中

一、相對定位和負邊距

我們可以使用相對定位和負邊距的方法實現文字的垂直居中。具體操作是設置文字所在容器為相對定位，再在文字元素中設置top和margin-top兩個屬性，其中top的值為50%，margin-top的值為文字高度的一半乘以-1。

.container{
    position:relative;
}
.text{
    position:absolute;
    top:50%;
    margin-top:-10px;
}

注意，這種方法適用於文字高度固定的情況下，如果高度不定，需要使用JavaScript獲取高度動態計算margin-top的值。

二、使用表格布局

使用表格布局也是一種實現文字垂直居中的方法，我們可以設置容器為table，文字元素為table-cell，再在文字元素中使用vertical-align:middle屬性即可。這種方法適用於支持表格布局的各種瀏覽器。

.container{
    display:table;
}
.text{
    display:table-cell;
    vertical-align:middle;
}

三、使用Flex布局

Flex布局是一種很流行的布局方式，也可以用來實現文字的垂直居中。我們可以設置容器為display:flex，並在文字元素中設置align-items:center和justify-content:center兩個屬性。

.container{
    display:flex;
    align-items:center;
    justify-content:center;
}
.text{
    /*無需設置*/
}

四、使用Grid布局

Grid布局是一種比較新的布局方式，在實現文字垂直居中方面也很方便。我們可以設置容器為display:grid，再在文字元素中使用align-self:center和justify-self:center兩個屬性。

.container{
    display:grid;
}
.text{
    align-self:center;
    justify-self:center;
}

五、line-height方法

通過設置line-height屬性也可以實現文字垂直居中。我們可以將line-height的值設置為容器高度的值，在文字元素中使用display:inline-block來使得line-height屬性生效。

.container{
    height:20px;
}
.text{
    display:inline-block;
    line-height:20px;
}