在使用CSS設計頁面的過程中，我們常常會遇到垂直居上的問題。比如想讓一張圖片在容器中垂直居上，但卻不知道該怎么做。下面我們就來看一看CSS中垂直居上需要寫什么樣的代碼。

代碼示例：
.container {
display: flex;
justify-content: center;
align-items: center;
}

上面的代碼是最常用的一種實現方式，通過設置容器的display為flex，然后使用justify-content和align-items來控制圖片在容器中的垂直居中和水平居中。justify-content用于控制主軸方向的水平居中，而align-items用于控制交叉軸方向的垂直居中。

有些情況下，我們并不想使用flex布局，這時候可以通過設置圖片的position屬性來進行垂直居中。代碼如下：

代碼示例：
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

通過設置圖片為絕對定位，然后使用top和transform來控制其在容器中的位置。其中，top為50%代表圖片的頂部位置為容器的中心，transform: translateY(-50%)為將圖片的中心線上移50%位，實現垂直居中。

值得一提的是，這種方法只適用于容器固定高度的情況下。如果容器高度不固定，那么圖片的位置可能會不準確。