CSS_水平垂直居中总结

太过爱你忘了你带给我的痛 2023-10-06 22:09 17阅读 0赞

https://segmentfault.com/a/1190000013966650

## 一、水平居中 ##

### 1.1、行内元素水平居中 ###

方式一：父元素设置 text-align: center  
利用text-align: center可以实现在块级元素内部的行内元素水平居中。  
此方法对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex元素水平居中都有效。

![在这里插入图片描述][f822eb5455934519986123d83c8477c5.png]

### 1.2 、块级元素水平居中 ###

#### 1.2.1、定宽高 ####

子元素使用margin: 0 auto;

![在这里插入图片描述][d9b3fdef3f03435ebd52f33d21add324.png]

#### 1.2.2、不定宽高 ####

父元素：  
display: flex;  
justify-content: center;

![在这里插入图片描述][50805968c8fc40ee8d4672b1842b2b01.png]

#### 1.2.3、多块级元素水平居中 ####

如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

![在这里插入图片描述][fab8575df92f418cacf9e73a9797a9d2.png]

## 二、垂直居中 ##

### 2.1、行内元素垂直居中 ###

#### 2.1.1、单行行内元素垂直居中 ####

设置行内元素的(line-height)和父级元素height的相等，从而使行内元素垂直居中。

![在这里插入图片描述][fce0ba6055364c7e8f943629f8f3f4a2.png]

#### 2.1.2、多行行内元素垂直居中 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16]

#### 2.1.3、使用flex ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16 1]

### 2.2、块级元素垂直居中 ###

#### 2.2.1、固定高度的块级元素 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16 2]

#### 2.2.2、不固定高度的块级元素 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16 3]

## 三、水平垂直居中 ##

### 3.1、 固定宽高元素水平垂直居中 ###

通过margin平移元素整体宽度的一半，使元素水平垂直居中

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16 4]

### 3.2、固定或未知宽高元素水平垂直居中 ###

#### 3.2.1、position ####

![在这里插入图片描述][a310e83fa82e4f3080f9b21dab0e98d9.png]

#### 3.2.2、利用flex布局(要考虑兼容性) ####

![在这里插入图片描述][34f640e4a2474fa29786978e91d004f4.png]

[f822eb5455934519986123d83c8477c5.png]: https://img-blog.csdnimg.cn/f822eb5455934519986123d83c8477c5.png
[d9b3fdef3f03435ebd52f33d21add324.png]: https://img-blog.csdnimg.cn/d9b3fdef3f03435ebd52f33d21add324.png
[50805968c8fc40ee8d4672b1842b2b01.png]: https://img-blog.csdnimg.cn/50805968c8fc40ee8d4672b1842b2b01.png
[fab8575df92f418cacf9e73a9797a9d2.png]: https://img-blog.csdnimg.cn/fab8575df92f418cacf9e73a9797a9d2.png
[fce0ba6055364c7e8f943629f8f3f4a2.png]: https://img-blog.csdnimg.cn/fce0ba6055364c7e8f943629f8f3f4a2.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c813587f3f2c40c2a64ea241b177055d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0efcc0bd29994446ab6b75b6b0bcc4e0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/51691c5306f54b2d98ca8324310dfbaf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/abbace20145f42a18ee4f665c7f5ef59.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_13_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/d02856f911f74644b77aad27cd9195e8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_13,color_FFFFFF,t_70,g_se,x_16
[a310e83fa82e4f3080f9b21dab0e98d9.png]: https://img-blog.csdnimg.cn/a310e83fa82e4f3080f9b21dab0e98d9.png
[34f640e4a2474fa29786978e91d004f4.png]: https://img-blog.csdnimg.cn/34f640e4a2474fa29786978e91d004f4.png