CSS布局中，垂直居中是一個很常見的問題。如何將元素在垂直方向上居中排列呢？下面將介紹幾種常用的方法。

1. 使用table-cell和vertical-align屬性

.parent {
display: table-cell;
vertical-align: middle;
}

將父元素設為display:table-cell，子元素即可通過vertical-align:middle實現垂直居中。

2. 使用flex布局

.parent {
display: flex;
justify-content: center;
align-items: center;
}

將父元素設為display:flex，子元素即可通過justify-content:center和align-items:center實現水平居中和垂直居中。

3. 使用絕對定位

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

將父元素設為position:relative，然后將子元素設為position:absolute，再用top:50%和transform:translateY(-50%)實現垂直居中。

4. 使用CSS Grid布局

.parent {
display: grid;
justify-content: center;
align-items: center;
}

將父元素設為display:grid，子元素即可通過justify-content:center和align-items:center實現水平居中和垂直居中。

以上是一些常用且簡單的實現垂直居中的方法，根據實際情況選擇最適合的方法即可。