CSS 中的布局一直是前端開發者所關注和優化的問題。對于網頁中多個元素的排布，我們通常需要實現一些特定的布局方式，比如水平和垂直居中、左右分欄等等。

而對于上下平均分布，我們需要讓多個元素在縱向上等高等寬地排列。在 CSS 中，我們可以使用 flex 布局或者 table 布局等方式實現上下平均分布。

.container{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.box{
width: 200px;
height: 200px;
background-color: #ccc;
margin: 10px;
}

以上是使用 flex 布局實現上下平均分布的代碼示例。通過將父級容器的 display 屬性設置為 flex，然后在縱向方向上設置 flex-direction 為 column，即可讓子元素基于垂直方向排列。

justify-content: space-evenly; 屬性可以讓子元素在縱向上等分布局，align-items: center; 屬性可以讓子元素在橫向上居中。最后，我們可以通過設置子元素的寬高和背景色，使得多個元素在高度和寬度上等同。

如果不想使用 flex 布局，我們也可以使用 table 布局實現上下平均分布。

.container{
display: table;
margin: 0 auto;
}
.box{
width: 200px;
height: 200px;
display: table-row;
background-color: #ccc;
}
.box:nth-child(odd){
background-color: #ddd;
}

以上是使用 table 布局實現上下平均分布的代碼示例。通過將父級容器的 display 屬性設置為 table，子元素的 display 屬性設置為 table-row，即可使得子元素按照表格的方式排列。

我們還可以通過設置奇偶子元素的背景色，使得多個元素在顏色上交替出現。

以上就是使用 CSS 實現上下平均分布的相關內容，希望能夠幫助到您！