CSS水平居中+垂直居中+水平/垂直居中的方法总结

男娘i 2023-10-09 15:03 73阅读 0赞

转载一位大佬的

[CSS水平居中+垂直居中+水平/垂直居中的方法总结\_一只前端小菜鸟~的博客-CSDN博客\_垂直居中的方法][CSS_-CSDN]

## 分享一篇我的博客 （详细记载工作中遇到的问题） ##

[前端工作四个月经验总结以及技术分享\_\_揽的博客-CSDN博客][-CSDN]

## 水平居中 ##

*  ### **行内元素** ###

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 **text-align: center;**

如果不是，则先将其父元素设置为块级元素，再给父元素设置 **text-align: center;**

效果：

![a9e2ba2f7c014ea3afaaecf4432f5976.png][]

*  ###  **块级元素** ###

#### **方案一：(分宽度定不定两种情况)** ####

**定宽度：**需要谁居中，给其设置 **margin: 0 auto;** （作用：使盒子自己居中）

效果：

![8edac1374be3497c9c0f12e8ba5260ac.png][] **不定宽度：**默认子元素的宽度和父元素一样，这时需要设置子元素为**display: inline-block;** 或 **display: inline;**即将其转换成行内块级/行内元素，给父元素设置 **text-align: center;**

效果：（将\#son转换成行内元素，内容的高度撑起了\#son的高度，设置高度无用）

![a1aabf1e3db041d5a0fcee65320cb043.png][]

#### **方案二：使用定位属性** ####

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的**left:50%**，即让子元素的左上角水平居中；

**定宽度：**设置绝对子元素的 **margin-left: -元素宽度的一半px;** 或者设置**transform: translateX(-50%);**

**不定宽度：**利用css3新增属性**transform: translateX(-50%);**

效果：![2638fc6a161d4d5c9fe0fd5f71daa90c.png][]

#### **方案三：使用flexbox布局实现（宽度定不定都可以）** ####

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 **display: flex; justify-content: center;**

效果：

![196799062c8b48ec9e02e4ceda5c6b10.png][]

## 垂直居中 ##

*  ### **单行的行内元素** ###

只需要设置单行行内元素的"行高等于盒子的高"即可；

效果：

![3cd48c9e27ed4745a9ad922e64f67579.png][]

*  ### **多行的行内元素** ###

使用给父元素设置**display:table-cell;****和****vertical-align: middle;**属即可；

![258ce17335fa491b8b7f6728809ee2d4.png][]

## 块级元素   方案一：使用定位   首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中； ##

定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

**不定高度：**利用css3新增属性**transform: translateY(-50%);**

效果：

![cfc51ac38e44441688645d4dda776ca0.png][]

#### **方案二：使用flexbox布局实现（高度定不定都可以）** ####

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 **display: flex; align-items: center;**

效果：

![b0772c5a280f4f998979435aa7a8c603.png][]

## 水平垂直居中 ##

*  ### 已知高度和宽度的元素 ###

**方案一：**设置父元素为相对定位，给子元素设置绝对定位，**top: 0; right: 0; bottom: 0; left: 0; margin: auto;**

效果：

![244da79c79154db7b8d7db50974114ac.png][]

**方案二：**设置父元素为相对定位，给子元素设置绝对定位，**left: 50%; top: 50%; margin-left: -****-元素宽度的一半px****; margin-top: -****-元素高度的一半px****;**

效果：

![2611c7aa24b04c6cae2c68b7d459cb0e.png][]

*  ### 未知高度和宽度的元素 ###

#### **方案一：**使用定位属性 ####

设置父元素为相对定位，给子元素设置绝对定位，**left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);**

效果：

![f484ff2b46894ffc9590831281496071.png][]

#### **方案二：**使用[flex][]布局实现 ####

设置父元素为flex定位，**justify-content: center; align-items: center;**

效果：

![2e7e34130b6f47e78fb615b01b46bb6d.png][]

[CSS_-CSDN]: https://blog.csdn.net/weixin_37580235/article/details/82317240?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166623092616800192283061%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166623092616800192283061&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-82317240-null-null.142%5Ev59%5Epc_search_tree,201%5Ev3%5Econtrol_1&utm_term=%E5%B1%85%E4%B8%AD&spm=1018.2226.3001.4187
[-CSDN]: https://blog.csdn.net/qq_59747594/article/details/127460478?spm=1001.2014.3001.5502
[a9e2ba2f7c014ea3afaaecf4432f5976.png]: https://img-blog.csdnimg.cn/a9e2ba2f7c014ea3afaaecf4432f5976.png
[8edac1374be3497c9c0f12e8ba5260ac.png]: https://img-blog.csdnimg.cn/8edac1374be3497c9c0f12e8ba5260ac.png
[a1aabf1e3db041d5a0fcee65320cb043.png]: https://img-blog.csdnimg.cn/a1aabf1e3db041d5a0fcee65320cb043.png
[2638fc6a161d4d5c9fe0fd5f71daa90c.png]: https://img-blog.csdnimg.cn/2638fc6a161d4d5c9fe0fd5f71daa90c.png
[196799062c8b48ec9e02e4ceda5c6b10.png]: https://img-blog.csdnimg.cn/196799062c8b48ec9e02e4ceda5c6b10.png
[3cd48c9e27ed4745a9ad922e64f67579.png]: https://img-blog.csdnimg.cn/3cd48c9e27ed4745a9ad922e64f67579.png
[258ce17335fa491b8b7f6728809ee2d4.png]: https://img-blog.csdnimg.cn/258ce17335fa491b8b7f6728809ee2d4.png
[cfc51ac38e44441688645d4dda776ca0.png]: https://img-blog.csdnimg.cn/cfc51ac38e44441688645d4dda776ca0.png
[b0772c5a280f4f998979435aa7a8c603.png]: https://img-blog.csdnimg.cn/b0772c5a280f4f998979435aa7a8c603.png
[244da79c79154db7b8d7db50974114ac.png]: https://img-blog.csdnimg.cn/244da79c79154db7b8d7db50974114ac.png
[2611c7aa24b04c6cae2c68b7d459cb0e.png]: https://img-blog.csdnimg.cn/2611c7aa24b04c6cae2c68b7d459cb0e.png
[f484ff2b46894ffc9590831281496071.png]: https://img-blog.csdnimg.cn/f484ff2b46894ffc9590831281496071.png
[flex]: https://so.csdn.net/so/search?q=flex&spm=1001.2101.3001.7020
[2e7e34130b6f47e78fb615b01b46bb6d.png]: https://img-blog.csdnimg.cn/2e7e34130b6f47e78fb615b01b46bb6d.png