弹性布局总纵轴排列,横轴居中
时间: 2023-06-30 07:05:51 浏览: 102
要实现弹性布局总纵轴排列,横轴居中,可以使用以下 CSS 样式:
```css
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
```
这里,我们先将容器的 `display` 属性设置为 `flex`,表示启用弹性布局。然后,我们将容器的主轴方向(默认为横向)设置为纵向,即 `flex-direction: column`。接着,我们使用 `justify-content: center` 将子元素在纵轴方向上居中对齐。最后,使用 `align-items: center` 将子元素在横轴方向上居中对齐。这样,就可以实现弹性布局总纵轴排列,横轴居中的效果了。
阅读全文