justify-content: center; align-items: center;
时间: 2023-07-29 09:07:32 浏览: 57
`justify-content: center;` 和 `align-items: center;` 是用来在容器元素中居中子元素的常用CSS属性。
`justify-content: center;` 属性用于水平居中子元素。它会将子元素沿着容器的水平中心线居中对齐。
`align-items: center;` 属性用于垂直居中子元素。它会将子元素沿着容器的垂直中心线居中对齐。
通常这两个属性会一起使用,以实现在容器元素中居中子元素的效果。例如:
```css
.container {
display: flex; /* 或者 display: inline-flex; */
justify-content: center;
align-items: center;
}
```
上面的代码中,我们将容器元素设置为 flex 布局,并使用 `justify-content: center;` 和 `align-items: center;` 属性将子元素在容器元素中水平和垂直居中。
相关问题
align-items: center; justify-content: center;
align-items: center; 和 justify-content: center; 是CSS中用于布局的两个属性。
align-items: center; 用于垂直方向上对齐元素。当设置为center时,元素会在垂直方向上居中对齐。
justify-content: center; 用于水平方向上对齐元素。当设置为center时,元素会在水平方向上居中对齐。
这两个属性通常用于flex布局中,可以使元素在容器中居中对齐。
display: flex; justify-content: center;
`display: flex;`是CSS中的一个属性,它用于指定一个元素应该被作为一个flex容器来显示。而`justify-content: center;`是用于设置flex容器中的子元素在主轴上的对齐方式,这里的主轴是指flex容器的主轴方向。`justify-content: center;`表示子元素在主轴上居中对齐。下面是一个例子:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
```
```html
<div class="container">
<div class="box"></div>
</div>
```
上面的代码中,`.container`是一个flex容器,`.box`是`.container`的子元素。`justify-content: center;`使得`.box`在`.container`的主轴上居中对齐。`align-items: center;`使得`.box`在`.container`的交叉轴上居中对齐。这样就可以实现一个居中对齐的效果。