CSS中div居上是指將一個div元素在父容器中垂直居中顯示的一種布局方式。通過使用CSS的屬性和值，我們可以輕松地實現div元素的垂直居中。接下來，我將通過幾個代碼案例來詳細說明如何實現div居上的效果。
，我們來看一個簡單的案例。假設我們有一個父容器div，內部包含一個子div。我們希望子div在父容器中垂直居中顯示。下面是實現該效果的代碼和解釋：

，我們需要給父容器設置一個固定的高度，以便子div可以在垂直方向上居中顯示。我們可以使用CSS的height屬性來設置這個值。

.parent {
height: 200px;
}

接下來，我們需要使用CSS的display和align-items屬性來實現垂直居中。display屬性用于設置元素的顯示方式，而align-items屬性可以設置元素在交叉軸上的對齊方式。

.parent {
height: 200px;
display: flex;
align-items: center;
}

最后，我們還可以添加一些額外的樣式來美化布局。比如，我們可以設置子div的背景顏色和文字顏色。

.parent {
height: 200px;
display: flex;
align-items: center;
background-color: #f2f2f2;
}
<br>
.child {
background-color: #fff;
color: #333;
}

通過以上代碼，我們可以看到子div在父容器中垂直居中顯示，且具有美觀的樣式。
接下來，讓我們看一個稍微復雜一點的案例。在這個案例中，我們希望實現一個居上布局，但是子div的高度是可變的。我們可以通過使用CSS的transform屬性來實現該效果。以下是代碼和解釋：

，我們需要給父容器設置position屬性，并將它設為相對定位。這樣，子div的絕對定位將參考父容器。我們可以使用CSS的position屬性來實現這個效果。

.parent {
position: relative;
}

接下來，我們可以使用CSS的transform屬性來控制子div的位置。使用translateY函數，我們可以將子div在垂直方向上向上移動，而不管子div的高度是多少。

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

通過以上代碼，我們可以看到無論子div的高度是多少，它都會在父容器中居上顯示。
至此，我們已經通過幾個代碼案例詳細說明了如何實現CSS中div居上的效果。通過使用不同的屬性和值，我們可以根據實際情況選擇最合適的方法來實現布局。無論是簡單的居上布局，還是子div高度可變的情況，我們都可以通過合適的CSS屬性和值來輕松實現。希望本文對你有所幫助！