CSS的文檔流是從上到下，從左到右，但是在實際開發過程中，有時需要讓div元素在垂直方向上居中，那么該如何實現呢？下面是一些實用的CSS方法。

/* 第一種方法：使用絕對定位和負margin */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

這種方法是使用絕對定位將子元素居中，首先需要將父元素的position設為relative（如果不設置，子元素將以body作為基準），然后使用top: 50%讓元素相對于父元素垂直居中，最后使用transform: translateY(-50%)讓元素往上移動自身高度的一半即可居中。

/* 第二種方法：使用flex布局 */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
/* 無需設置 */
}

使用flex布局的方式非常簡單，只需要給父元素設置display: flex即可，然后使用justify-content: center和align-items: center分別讓元素在水平和垂直方向上居中。需要注意的是，這種方法在IE瀏覽器下可能會有兼容性問題。

/* 第三種方法：使用table-cell布局 */
.parent {
display: table-cell;
vertical-align: middle;
}
.child {
/* 無需設置 */
}

使用table-cell布局的方式也很簡單，只需要給父元素設置display: table-cell即可，然后使用vertical-align: middle讓元素在垂直方向上居中。需要注意的是，這種方法會改變元素的display屬性，可能會影響到原有的樣式。