在網頁設計中，經常需要讓文字垂直居中，特別是在一些場景下，比如導航欄、按鈕等。本文主要介紹一些在CSS樣式中，如何使文本的上下居中展示。

一、利用line-height

文本上下居中展示
.text {
background-color: #f5f5f5;
height: 40px;
width: 100px;
line-height: 40px; /*實現上下垂直居中*/
}

使用以上代碼時，需要通過height屬性來限制該文本容器的高度，然后再設置line-height的值為與height相等，這樣便可以實現文本的上下居中展示。

二、利用display-flex

文本上下居中展示
.text {
background-color: #f5f5f5;
height: 40px;
width: 100px;
display: flex; /*開啟Flex布局*/
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}

上面代碼中，通過將容器的display屬性設置為flex，開啟Flex布局，然后再通過align-items屬性將文本垂直居中，并通過justify-content屬性將文本水平居中，最終實現上下居中效果。

總結：以上兩種方法都可以實現文本的上下居中效果，但是要結合實際情況選擇使用哪一種方法。