可以使用 Flexbox 布局来解决不确定数量的子元素堆栈对齐的问题。以下是一个示例代码:
HTML:
1
2
3
CSS:
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
在上面的示例中,.container
元素被设置为 Flexbox 布局,并且主轴方向为垂直(默认是水平)。使用 align-items: center;
属性可以使子元素在交叉轴方向上居中对齐。.item
类定义了子元素的样式,包括宽度、高度和背景颜色。
通过这种方式,不管有多少个子元素,它们都会在垂直方向上居中堆叠对齐。