【超详细】CSS水平居中+垂直居中+水平/垂直居中的方法总结

秒速五厘米 2022-10-31 04:18 213阅读 0赞

### 文章目录 ###

*  1.如何实现水平居中
 *   *   *   *  行内元素
             *  块级元素
 *  2.如何实现盒子垂直居中
 *   *   *   *  单行的行内元素
             *  多行的行内元素
             *  块级元素
 *  3.如何实现水平垂直居中
 *   *   *   *  已知高度和宽度的元素
             *  未知高度和宽度的元素

# 1.如何实现水平居中 #

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

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

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

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

**方法1：margin**

1.如果盒子**宽度给定**，给其设置`margin: 0 auto;`（作用：使盒子自己居中）

2.如果盒子**不定宽度**，则子元素的宽度默认与父元素一样宽。这时需要设置子元素为`display: inline-block;` 或`display: inline;`即将其转换成行内块级/行内元素，给父元素设置 `text-align: center;`

**方法2：定位**

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

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

2.盒子\*\*不定宽度：\*\*利用css3新增属性`transform: translateX(-50%);`

**方法3：用flex布局**

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

# 2.如何实现盒子垂直居中 #

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

只需要设置单行行内元素`line-height: 父盒子高度px;`

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

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

父元素变成表格单元格，设置多行文字垂直居中

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

**方法1：定位**

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

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

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

**方法2：flex布局**

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

# 3.如何实现水平垂直居中 #

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

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

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

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

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

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

\*\*方案二：\*\*使用flex布局实现

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

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS垂直居中、水平居中（超详细解析）

让一个div或者一段文字亦或者一张照片居中显示的问题，面试的过程中也经常被问到。相信大家都日常的布局也经常会用到，回答出个三两种解决方案亦不是难事。但今天我细究了一下，发现还有

比眉伴天荒/ 2023年10月11日 12:55/ 0 赞/ 20 阅读

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

转载一位大佬的 [CSS水平居中+垂直居中+水平/垂直居中的方法总结\_一只前端小菜鸟~的博客-CSDN博客\_垂直居中的方法][CSS_-CSDN] 分享一篇我的博客

男娘i/ 2023年10月09日 15:03/ 0 赞/ 72 阅读

相关 CSS_水平垂直居中总结

https://segmentfault.com/a/1190000013966650 一、水平居中 1.1、行内元素水平居中方式一：父元素设置 text-al

太过爱你忘了你带给我的痛/ 2023年10月06日 22:09/ 0 赞/ 29 阅读

相关浅谈CSS居中问题（水平居中、垂直居中、水平垂直居中）

浅谈居中问题概述行内元素居中水平居中方法一：父元素设置text-align: cente

Myth丶恋晨/ 2023年06月13日 09:37/ 0 赞/ 43 阅读

相关面试题：CSS盒子水平居中、垂直居中、水平垂直居中

目录 1. 实现盒子水平垂直居中方法一：定位（1）方法二：定位（2）

比眉伴天荒/ 2023年02月26日 11:28/ 0 赞/ 113 阅读

相关 CSS水平垂直居中

在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

不念不忘少年蓝@/ 2022年11月12日 08:18/ 0 赞/ 378 阅读

相关【超详细】CSS水平居中+垂直居中+水平/垂直居中的方法总结

文章目录 1.如何实现水平居中行内元素块级元素 2.如何实现盒子垂直居中单

秒速五厘米/ 2022年10月31日 04:18/ 0 赞/ 214 阅读

相关 CSS垂直水平居中方式大全(一)----水平居中-垂直居中

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。一、水平居中

冷不防/ 2022年06月04日 01:53/ 0 赞/ 504 阅读

相关 CSS水平居中，垂直居中，水平垂直居中

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： ![640?wx\_fmt=png][640_wx_fmt_png] ![640

小咪咪/ 2022年02月15日 14:53/ 0 赞/ 456 阅读

相关水平居中，垂直居中

一、水平居中（1）行内元素，给其父元素添加text-align:center即可；（2）块状元素，该元素设置margin:0 auto即可；（3）若子元素包含flo

╰+哭是因爲堅強的太久メ/ 2021年12月18日 05:09/ 0 赞/ 454 阅读