css居中完整版

发表于 分类于
本文字数： 3k 阅读时长 ≈ 3 分钟

是时候对 css 居中的各种方式来波总结了！下面是一提到居中就应该联想到的关键属性：

水平垂直居中

flex

1
2
3
4
5
.outer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

或：

1
2
3
4
5
6
7
.outer {
  display: flex;
}

.inner {
  margin: auto;
}

不需要固定居中元素的宽高。

grid

1
2
3
4
5
6
7
8
.outer {
  display: grid;
}

.inner {
  justify-self: center; /* 水平居中 */
  align-self: center; /* 垂直居中 */
}

或：

1
2
3
4
5
6
7
.outer {
  display: grid;
}

.inner {
  margin: auto;
}

不需要固定居中元素的宽高。

absolute + transform

1
2
3
4
5
6
7
8
9
10
.outer {
  position: relative;
}

.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

不需要固定居中元素的宽高。

absolute + calc

1
2
3
4
5
6
7
8
9
.outer {
  position: relative;
}

.inner {
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

需要固定居中元素的宽高。

absolute + 负 margin

1
2
3
4
5
6
7
8
9
10
11
.outer {
  position: relative;
}

.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

需要固定居中元素的宽高。

absolute + margin: auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.outer {
  position: relative;
}

.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
}

需要固定居中元素的宽高。

writing-mode

1
2
3
4
5
<div class="outer">
  <div class="inner">
    <div class="content"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.outer {
  writing-mode: vertical-lr;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 100%;
  height: auto;
  writing-mode: horizontal-tb;
  text-align: center;
}

.content {
  display: inline-block;
  text-align: left; /* 重置文字位置 */
}

需要修改 DOM 结构（为了居中元素，需要嵌套两层父元素）。不需要固定居中元素的宽高。

水平居中

行内元素/行内块级元素特有

1
2
3
4
.box {
  display: inline-block; /* 或 display: inline; */
  text-align: center;
}

margin: auto

1
2
3
4
.box {
  display: block;
  margin: 0 auto;
}

需要固定居中元素的宽。

text-align + inline-block

1
2
3
4
5
6
7
8
.outer {
  text-align: center;
}

.inner {
  display: inline-block;
  text-align: left; /* 重置文字位置（如果需要） */
}

上面代码中的 text-align: center; 会使文本居中，但是对块级元素无效，如果将元素设置为 inline-block，该元素就会被当做文本对待，从而实现元素居中。

不需要固定居中元素的宽。

fit-content + margin

1
2
3
4
.inner {
  width: fit-content;
  margin: auto;
}

会使元素的宽度改变（同内容宽度）。

1
2
3
4
.outer {
  width: fit-content;
  margin: auto;
}

即使子元素是浮动元素也适用。

垂直居中

table-cell + vertical-align

1
2
3
4
.outer {
  display: table-cell;
  vertical-align: middle;
}

不需要固定居中元素的高。

inline-block + line-height

1
2
3
4
.parent {
  height: 100px;
  line-height: 100px;
}

元素的 height 和 line-height 相同的时候，会使其文本内容垂直居中。因此该方案利用了这一特点，不过文本内容虽然垂直居中了，但是元素并没有，因此再将元素设置为 inline-block，这样元素就会被当做文本对待了。同时由于具有了 inline 属性，vertical-align: middle; 也就可以生效了。

1
2
3
4
5
6
7
8
9
.outer {
  line-height: 300px;
}

.inner {
  line-height: initial; /* 重置 */
  vertical-align: middle;
  display: inline-block;
}

需要知道其父元素高度,不需要固定居中元素的高。

inline-block + vertical-align

1
2
3
4
5
6
7
8
9
10
11
.outer::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.inner {
  display: inline-block;
  vertical-align: middle;
}

在居中元素的父元素上，使用一个伪元素，将这个伪元素设置为 inline-block 后，就好像它原来就是一个真正的 DOM 元素，存在于页面上。然后再将居中元素设置为 inline-block，根据 inline-block 的特性（多个相邻的 inline-block 元素会横向并排显示），居中元素会和伪元素横向并排显示。并且设置 vertical-align: middle; 后，它们会互相垂直对齐，最后将伪元素高度撑起来 height: 100%;，居中元素会对齐伪元素，从而实现了垂直居中。

不需要固定居中元素的高。