CSS3 文字垂直居中是網頁設計中常見的技巧。本文將介紹兩種方法實現文字垂直居中的效果。 方法一：使用line-height屬性 在CSS中，可以使用line-height屬性來控制行高。當文字高度小于行高時，文字就會垂直居中。 例如，下面的CSS代碼將文字垂直居中： ```CSS p { line-height: 2; height: 60px; border: 1px solid black; } ``` 在上述代碼中，我們給p元素設置了一個高度為60像素的邊框框。然后，將行高設置為2，使得文字居中。請注意，這種方法只適用于單行文本。 方法二：使用flexbox CSS3引入了一個新的布局模型——彈性盒子布局模型。flexbox布局模型可以輕松實現網頁的布局和對齊。 例如，下面的CSS代碼將使用flexbox實現文字垂直居中： ```CSS p { display: flex; justify-content: center; align-items: center; height: 200px; border: 1px solid black; } ``` 使用display: flex將p元素變為flex容器，并使用justify-content: center和align-items: center將元素內的文本居中。請注意，這種方法適用于多行文本。 總結 以上是兩種常見的實現CSS3文字垂直居中的方法。通過使用line-height或flexbox，您可以輕松地實現各種網頁設計中的垂直居中效果。