CSS布局中，子div垂直居中是一個常見的難題。在許多情況下，我們希望子div能夠按照我們的期望垂直居中，以便網頁更好地展示。

有多種方法可以實現子div的垂直居中，其中一種方法是使用CSS的Flexbox布局。使用Flexbox可以讓我們輕松地控制子div的位置和大小。

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

上述代碼中，我們為父元素添加了Flexbox布局，并在其中設置子元素的水平和垂直居中。具體來說，justify-content和align-items分別控制了水平和垂直方向上的對齊方式。

除了使用Flexbox，我們還可以使用其他方法來實現子div的垂直居中。比如，可以使用position和transform屬性組合來使子元素垂直居中。

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

上述代碼中，我們首先設置父元素的position屬性為relative，然后將子元素的position屬性設置為absolute，并在其中設置top和transform屬性，使其垂直居中。其中，top屬性的值為50%，表示子元素的頂部與父元素的中央對齊；而transform屬性中的translateY函數則向上移動子元素的一半高度，即使其垂直居中。

通過以上方法，我們可以輕松地實現子div的垂直居中。當然，不同的布局和樣式情況也可能需要不同的方法來實現垂直居中，需要根據具體情況選擇最合適的方法。