現今，許多網站都喜歡將特定內容垂直居中。CSS提供了多種方法實現垂直居中。本文將介紹其中的三種方式：使用display屬性結合vertical-align屬性、使用Flexbox布局以及使用Grid布局。 使用display屬性結合vertical-align屬性實現垂直居中： ``` .container { display: table-cell; vertical-align: middle; } ``` 上述代碼中，將容器（container）的display屬性設置為table-cell，vertical-align屬性設置為middle，就可以實現垂直居中。 使用Flexbox布局實現垂直居中： ``` .container { display: flex; align-items: center; justify-content: center; } ``` 上述代碼中，將容器（container）的display屬性設置為flex，align-items屬性設置為center，justify-content屬性設置為center，就可以實現垂直居中。 使用Grid布局實現垂直居中： ``` .container { display: grid; place-items: center; } ``` 上述代碼中，將容器（container）的display屬性設置為grid，place-items屬性設置為center，就可以實現垂直居中。 總結：以上三種方式都能實現垂直居中，每種方式的適用場景不同。我們需要根據實際情況進行選擇。如果需要兼容性較好的方式，可以使用第一種方式；如果瀏覽器支持Flexbox布局，可以使用第二種方式；如果瀏覽器支持Grid布局，可以使用第三種方式。