CSS 实现元素水平垂直居中的 N 种方式

╰+哭是因爲堅強的太久メ 2022-09-04 03:59 56阅读 0赞

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

![ba40f0ea9cf747c0909f83922c3d9de1.png][]

## 水平居中 ##

### 1. 行内元素 ###

若是行内元素，给其父元素设置 `text-align:center` 即可实现行内元素水平居中

<div class="parent">
      <span class="child">测试</span>
    </div>
    <style>
      .parent {
        background-color: aqua;
        text-align: center; /* 水平居中 */
      }
      .child {
        color: #fff;
        background-color: blueviolet;
      }
    </style>

![259b3d9cac1770908f94975877846f15.png][]

### 2. 块级元素 ###

#### 2.1 宽高固定 ####

当宽高固定时，以下 html 示例：

<div class="parent">
      <div class="child"></div>
    </div>
    <style>
      .parent {
        height: 100px;
        background-color: aqua;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
      }
    </style>

以下四种方式显示效果均为：

![a1d1b62290eeae81064ca51475d094d3.png][]

##### 方式一：margin:0 auto #####

##### 方式二：absolute + margin-left #####

##### 方式三：absolute + calc #####

##### 方式四：absolute + left + right + margin-left #####

#### 2.2 宽高不定 ####

当宽高不定时，以下测试示例：

<div class="parent">
      <div class="child">测试示例</div>
    </div>
    <style>
      .parent {
        height: 100px;
        background-color: aqua;
      }
      .child {
        background-color: blueviolet;
        color: #fff;
      }
    </style>

以下三种方式显示效果均为：

![d8a73a30cc7d7d79df0f3afb64b31043.png][]

##### 方式一：使用 CSS3 中新增的 transform 属性 #####

##### 方式二：flex 布局 #####

![2d3cdccff3a1234dac5bc5b9efa16a6a.png][]

##### 方式三：width: fit-content #####

`fit-content` 是 CSS3中 给 `width` 属性新加的一个属性值，它配合 `margin` 可以轻松实现水平居中

## 垂直居中 ##

### 1. 行内元素 ###

代码示例：

<div class="parent">
      <span class="child">测试示例</span>
    </div>
    <style>
      .parent {
        height: 100px;
        background-color: aqua;
        text-align: center; /* 水平居中 */
      }
      .child {
        color: #fff;
        background-color: blueviolet;
      }
    </style>

#### 方式一：line-height（单行文本） ####

![d859d3d367362abc3f003f2e384ec8bf.png][]

当多行时会样式错乱，需要用到 `vertical-align: middle` 布局

#### 方式二：display: table-cell + vertical-align (多行文本) ####

可用 **vertical-align** 属性, 而 `vertical-align` 只有在父层为 `td` 或者 `th` 时, 才会生效，对于其他块级元素, 例如 `div` 、 `p` 等，默认情况是不支持的。

为了使用 `vertical-align` ，我们需要设置父元素 `display:table` , 子元素 `display:table-cell; vertical-align:middle;`

![dbec30b2083bd538e6bc45b98ad621f1.png][]

#### 方式三：display: inline-block + vertical-align 隐式幽灵节点 ####

设置幽灵节点的高度以及幽灵节点的基线（通过 `line-height` ），来设置幽灵节点的 `x-height` , 是 `span` 的中线与幽灵节点的中线对齐，同样也可以使 `vertical-align: middle;` 居中

![46934b6b803e38793f0ec53b96774527.png][]

#### 方式四：display: grid 布局 ####

效果如上

#### 方式五：writing-mode 布局 ####

`writing-mode` 属性定义了文本在水平或垂直方向上如何排布。

效果如上

### 2. 块级元素 ###

参照 **水平居中的块级元素布局** ，同样把对水平方向的转换为垂直方向的

#### 2.1 宽高固定 ####

示例代码：

<div class="parent">
      <div class="child"></div>
    </div>
    <style>
      body {
        background-color: aqua;
      }
      .child {
        width: 50px;
        height: 50px;
        background-color: blueviolet;
      }
    </style>

以下几种方式显示效果均为：

![d05ba03be1d31ca03e9e79314ee696db.png][]

##### 方式一：absolute + margin-top #####

##### 方式二：absolute + calc #####

##### 方式三：absolute + left + right + top + bottom #####

#### 2.2 宽高不定 ####

当宽高不定时，以下测试示例：

<div class="parent">
      <div class="child">测试示例</div>
    </div>
    <style>
      .parent {
        height: 100px;
        background-color: aqua;
      }
      .child {
        background-color: blueviolet;
      }
    </style>

以下两种方式显示效果均为：

![081576a7b78a979154334906da268aa0.png][]

##### 方式一：使用 CSS3 中新增的 transform 属性 #####

需要设定 parent 为相对定位( `position: relative` )

##### 方式二：flex 布局 #####

![fe8ca2fe2eb3ce67ae5f86558119396b.png][]

来源：https://github.com/Advanced-Frontend/Daily-Interview-Question

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

号内回复：

「**网络**」，自动获取三分钟学前端网络篇小书（90+页）

「**JS**」，自动获取三分钟学前端 JS 篇小书（120+页）

「**算法**」，自动获取 github 2.9k+ 的前端算法小书

「**面试**」，自动获取 github 23.2k+ 的前端面试小书

「**简历**」，自动获取程序员系列的 `120` 套模版

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的

[ba40f0ea9cf747c0909f83922c3d9de1.png]: /images/20220829/f872eb72f70d48cf9727c1a9de75b264.png
[259b3d9cac1770908f94975877846f15.png]: /images/20220829/643a4e4855384c269eea8c1a86a11be0.png
[a1d1b62290eeae81064ca51475d094d3.png]: /images/20220829/2444dedb7f9a4f8c815cb102d2c4deb0.png
[d8a73a30cc7d7d79df0f3afb64b31043.png]: /images/20220829/407589711a774e75b7497d9f9339976c.png
[2d3cdccff3a1234dac5bc5b9efa16a6a.png]: /images/20220829/bb75c9600fc24d3585e75a81e63c2624.png
[d859d3d367362abc3f003f2e384ec8bf.png]: /images/20220829/f3d4a32b5d7a43f4aee1e39a26dbafa6.png
[dbec30b2083bd538e6bc45b98ad621f1.png]: /images/20220829/45847f482fbc449a909fafa3ecb79e8d.png
[46934b6b803e38793f0ec53b96774527.png]: /images/20220829/969f1b7f45ef4ee8996fd21bab0d0b23.png
[d05ba03be1d31ca03e9e79314ee696db.png]: /images/20220829/b32bfe59ecde4ea9b174c8673902c1eb.png
[081576a7b78a979154334906da268aa0.png]: /images/20220829/98562b9c59a644b89f1d66f0b7ed7c00.png
[fe8ca2fe2eb3ce67ae5f86558119396b.png]: /images/20220829/f3149950c9ca4041a8cfd158b6b7fe67.png