當我們希望一個元素在垂直方向上居中時，通常可以使用以下的 CSS 代碼：

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

該代碼將元素的父級容器設為彈性容器（flex container），并通過 justify-content 和 align-items 屬性將子元素沿著主軸和交叉軸都居中對齊。

但是，當子元素的高度不確定時，以上代碼可能不起作用。在這種情況下，我們可以使用以下技巧來將子元素垂直居中：

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

該代碼通過將子元素相對于父級容器定位，并使用 top 和 transform 屬性將其上邊緣的位置設為父級容器高度的一半再向上移動其自身高度的一半，從而實現垂直居中。

值得注意的是，父級容器必須具有確定的高度，否則子元素將無法正確居中。