flex 布局 居中
时间: 2023-11-11 20:59:14 浏览: 42
使用 flex 布局可以通过以下两种方式实现居中:
1. 水平居中:将父元素的 display 属性设置为 flex,然后设置 justify-content 属性为 center。
```
.parent {
display: flex;
justify-content: center;
}
```
2. 垂直居中:将父元素的 display 属性设置为 flex,然后设置 align-items 属性为 center。
```
.parent {
display: flex;
align-items: center;
}
```
如果需要同时实现水平和垂直居中,可以将上述两种方式结合起来使用。
相关问题
怎么让flex布局居中
要让flex布局居中,可以使用以下方法:
1. 使用justify-content属性和align-items属性,将父容器设置为display: flex,并且设置justify-content: center和align-items: center,这样子元素就会水平和垂直居中。
示例代码如下:
```css
.flex_parent {
display: flex;
justify-content: center;
align-items: center;
}
```
2. 如果想要在垂直方向上居中,可以使用align-items: center;,如果只想在水平方向上居中,可以使用justify-content: center。
示例代码如下:
```css
.flex_parent {
display: flex;
align-items: center; /* 垂直居中 */
}
或
.flex_parent {
display: flex;
justify-content: center; /* 水平居中 */
}
```
3. 如果希望子元素在主轴上居中,可以使用justify-content: center,如果希望在交叉轴上居中,可以使用align-items: center。
示例代码如下:
```css
.flex_parent {
display: flex;
justify-content: center; /* 主轴上居中 */
}
或
.flex_parent {
display: flex;
align-items: center; /* 交叉轴上居中 */
}
```
flex布局垂直居中
要在Flex布局中实现垂直居中,可以使用align-items属性。这个属性可以控制侧轴上子元素的排列方式。在垂直方向上,可以使用align-items: center;来实现垂直居中。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [常用的几种布局方式---Flex 布局(垂直居中展示)](https://blog.csdn.net/weixin_64310738/article/details/129034523)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [flex布局以及实现垂直居中](https://blog.csdn.net/weixin_49519788/article/details/118093101)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)