在前端開發中，我們常常需要實現垂直居中的效果，這在很多時候是很難實現的。但是，使用 CSS 布局技巧，可以輕松實現。下面我們就來講一講如何實現 CSS 垂直居中父布局的效果。

要實現垂直居中，首先需要將子元素居中對齊，我們可以使用 flexbox 布局來實現。具體代碼如下：

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

上面的代碼，將display屬性設置為flex，然后使用justify-content屬性來實現子元素水平居中，使用align-items屬性來實現子元素垂直居中。這種方式適合只有一個子元素的情況。

如果有多個子元素，我們需要使用絕對定位來實現。具體代碼如下：

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

上面的代碼，將父元素的position屬性設置為relative，然后將子元素的position屬性設置為absolute，使用top: 50%來將子元素垂直居中，再使用transform: translateY(-50%)屬性來實現精確的垂直居中。這種方式適合有多個子元素的情況。

以上就是 CSS 實現垂直居中父布局的兩種方法。通過這種方法，我們可以輕松實現垂直居中的效果，讓布局更加美觀。