CSS3 較之前的CSS版本，有非常多的新特性和屬性，其中讓文字垂直居中的方法也有了一些改進和擴展。在這篇文章中，我們將介紹一些常用的 CSS3 屬性和技巧，幫助你輕松實現文字垂直居中的效果。 首先，我們需要將文本包裹在一個容器元素中，如下所示：

<div class="container">
<p>這是要居中的文字</p>
</div>

接下來，我們可以使用以下幾種方法實現垂直居中的效果： 1. line-height 屬性 通過設置容器元素的 line-height 屬性與容器高度相等，可以使得文本垂直居中。

.container {
height: 100px;
line-height: 100px;
}

這種方法適用于單行文本的垂直居中，但對于多行文本則效果不佳。 2. display:flex 屬性 display:flex 屬性可以讓容器元素的內部元素自動垂直居中。需要將容器元素的 display 屬性設置為 flex，并使用 align-items:center 實現垂直居中。

.container {
height: 100px;
display: flex;
align-items: center;
}

這種方法適用于單行和多行文本的垂直居中，但需要注意的是，該方法可能會影響容器內部的布局和排列。 3. transform 屬性 使用 transform 屬性的 translate 函數可以將文本相對于容器元素垂直移動一半的高度，實現垂直居中的效果。

.container {
height: 100px;
position: relative;
}
.container p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

這種方法適用于單行和多行文本的垂直居中，并且不會對容器元素內部的其他元素布局產生影響。 綜上所述，CSS3 提供了多種實現文字垂直居中效果的方法，我們可以根據實際場景和需求選擇最適合的方法進行實現。