CSS能夠讓網頁呈現出不同的效果，其中垂直居中就是常見的一個效果。在設計網頁時，我們經常會有垂直居中的需求，比如將圖片或者文本框置于父容器中央。下面，我們就來介紹一些實現CSS始終垂直居中顯示的方法。 （注：下面展示的代碼均采用pre標簽包裹，以方便展示。） 1.利用flex布局方式 使用flex布局方式是實現垂直居中的一種常見且易于實現的方法，具體代碼如下所示： pre { display: flex; justify-content: center; align-items: center; } flex布局方式使用display屬性設置為flex，以及justify-content和align-items屬性分別設置為center，就可以實現將內容在父容器中垂直居中。 2.利用position和transform方式 另一個經常使用的方法是position和transform結合使用，具體代碼如下： pre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 這種方式利用了position屬性的absolute定位和top、left屬性的設置，再利用transform屬性進行調整，實現了垂直居中的效果。需要注意的是，這種方法必須將父容器的position屬性設置為relative，否則無法實現。 3.使用table-cell模型 table-cell模型也是一種實現垂直居中的常見方法，具體代碼如下： pre { display: table-cell; vertical-align: middle; } 這種方式比較老舊，不過由于兼容性較好，仍有一定廣泛應用。使用這種方式需要設置元素的display屬性為table-cell，以及vertical-align屬性設置為middle，就可以實現元素在其父容器中垂直居中。 4.采用grid布局方式 grid布局是CSS3中新增的一種布局方式，可以非常靈活地布置元素，并且支持一些比較復雜的布局效果，包括垂直居中。具體代碼如下： pre { display: grid; place-items: center; } 使用grid布局方式只需要將display屬性設置為grid，再使用place-items屬性設置為center，就可以實現元素在父容器中始終垂直居中的效果。 綜上所述，我們介紹了幾種實現CSS始終垂直居中顯示的方法，每種方法都有自己的優點和適用場景。我們可以根據實際需求選擇合適的方法，讓網頁設計顯得更加完美。