css flex布局,如果多个元素就居中横向排列,如果单个元素就直接居中显示。
可以使用 CSS flexbox 布局实现这个需求。对于多个元素,可以设置父容器的 display: flex 和 justify-content: center,这样元素就会在横向上居中排列。对于单个元素,可以设置 margin: 0 auto 实现居中显示。代码示例:
<style>
.container {
display: flex;
justify-content: center;
}
.item {
margin: 0 auto;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>