css 上下平均分布

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 实现上下平均分布的相关内容，希望能够帮助到您！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！