在CSS中，縱向居中是一個常見的布局問題。如何將元素在垂直方向上居中？以下是幾種常見的方法。 1. 讓元素的高度等于父元素的高度 這種方法適用于元素的高度已知。可以將元素的高度設置為父元素的高度。例如： ``` .parent { height: 300px; display: flex; justify-content: center; align-items: center; } .child { height: 100%; width: 50%; } ``` 2. 使用絕對定位 這種方法適用于元素的高度未知。可以使用絕對定位將元素居中。例如： ``` .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } ``` 3. 使用Flexbox 這種方法適用于元素的父元素使用Flexbox布局。可以使用`justify-content`和`align-items`屬性將元素水平和垂直居中。例如： ``` .parent { display: flex; justify-content: center; align-items: center; } .child { height: 50px; width: 50px; } ``` 4. 使用Grid 這種方法適用于元素的父元素使用Grid布局。可以使用`justify-items`和`align-items`屬性將元素水平和垂直居中。例如： ``` .parent { display: grid; justify-items: center; align-items: center; } .child { height: 50px; width: 50px; } ``` 以上就是幾種CSS中縱向居中的常見方法。每種方法都有其適用場景，根據實際情況選擇最合適的方法進行布局。