在實現div上下平分之前，我們需要了解CSS中的兩個重要的屬性：display和position。其中display屬性用于定義一個塊級元素的顯示方式，常用的取值有block、inline和inline-block。而position屬性用于定位一個元素的位置，常用的取值有relative、absolute和fixed。
下面是一個使用display和position屬性實現div上下平分的代碼案例：
<style>
.parent {
height: 300px;
position: relative;
}
<br>
.child {
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<br>
<div class="parent">
<div class="child">上</div>
<div class="child">下</div>
</div>在上面的代碼中，我們將父元素的高度設置為300px，并將其position屬性設置為relative，以便于子元素進行絕對定位。然后，我們給子元素設置了50%的高度，并將其position屬性設置為absolute，使得其脫離正常文檔流。接著，我們使用top屬性將第一個子元素向上偏移50%，再使用transform屬性將其上移自身高度的一半，以實現垂直居中。同樣的方法，我們可以通過設置不同的top值和transform屬性來實現第二個子元素的垂直居中。
除了使用display和position屬性，我們還可以使用Flexbox布局來實現div上下平分。Flexbox是CSS3中提供的一種強大的布局模型，它可以實現彈性盒子的布局，非常適合實現居中和平分等效果。
下面是一個使用Flexbox布局實現div上下平分的代碼案例：
<style>
.parent {
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
<br>
.child {
height: 50%;
}
</style>
<br>
<div class="parent">
<div class="child">上</div>
<div class="child">下</div>
</div>在上面的代碼中，我們將父元素的高度設置為300px，并將其display屬性設置為flex，以啟用Flexbox布局。然后，我們使用flex-direction屬性將子元素的排列方向設置為垂直方向，并使用justify-content屬性將子元素在父元素中垂直平分。最后，我們需要給子元素設置50%的高度以實現上下平分。
通過上面的案例代碼，我們可以清楚地了解到如何使用display和position屬性，以及Flexbox布局來實現div上下平分。這些方法不僅能夠幫助我們實現網頁布局中的垂直居中，還可以用于其他各種場景。希望本文對您有幫助！