css display flex 子元素居中
时间: 2023-11-12 22:59:12 浏览: 103
CSS弹性盒模型flex在布局中的应用详解
可以使用 flex 布局的 align-items 和 justify-content 属性来实现子元素的居中。
具体来说,如果想要让子元素在主轴和交叉轴上都居中,可以这样设置:
```css
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
```
如果只想在主轴上居中,可以这样设置:
```css
.parent {
display: flex;
justify-content: center; /* 水平居中 */
}
```
如果只想在交叉轴上居中,可以这样设置:
```css
.parent {
display: flex;
align-items: center; /* 垂直居中 */
}
```
阅读全文