HTML+CSS33 关于居中的总结

发表于 分类于 阅读次数：

关于CSS中水平、垂直居中的总结

准备工作

HTML结构：

1
2
3
<div class="container">
  <span class="text">你好</span>
</div>

公共样式：

1
2
3
4
5
6
7
8
.container {
  width: 300px;
  height: 300px;
  background: royalblue;
}
.text {
  background: darkgoldenrod;
}

水平居中的方法

（1）使用text-align: center

对于行内元素，可以直接使用text-align: center来水平居中

1
2
3
.container {
  text-align: center;
}

（2）使用margin: 0 auto

对于宽度确定的块级元素，可以使用margin: 0 auto来水平居中，原理和后面的绝对定位加margin: auto的原理类似，后面单独结合总结。

1
2
3
4
5
.text {
  display: block;
  width: 100px;
  margin: 0 auto;
}

（3）flex布局

如果不考虑兼容性，很完美的方案：

1
2
3
4
.container {
  display: flex;
  justify-content: center;
}

（4）grid布局

显然兼容性有着问题的方案：

1
2
3
4
.container {
  display: grid;
  justify-content: center;
}

（5）绝对定位+移动

父元素相对定位，子元素绝对定位，并且使用transfrom移动自身宽度的-50%（如果子元素的高度已知也可以通过margin向左移动自身高度的一半

1
2
3
4
5
6
7
8
.container {
  position: relative;
}
.text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

（6）绝对定位和margin: auto

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

.text {
  position: absolute;
  left: 0;
  right: 0;
  width: 100px;
  margin: auto;
}

一定要指定子元素的宽度，否则子元素就会充满父元素

垂直居中的方法

（1）vertical-align: middle

针对行内元素，并且需要有一个兄弟行内元素，撑满父元素：

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

（2）line-height === height

让父元素的height和line-height相等，一般适用于文字的居中

1
2
3
.container {
  line-height: 300px;
}

（3）padding

适用于父元素高度不确定，或者说父元素高度是根据子元素高度确定的情况：

1
2
3
4
5
6
7
/* container 不能指定 height */
.container {
  padding: 20px 0;
}
.text {
  background: darkgoldenrod;
}

（4）绝对定位+移动

父元素相对定位，子元素绝对定位，并且使用transfrom移动自身高度的-50%（如果子元素的高度已知也可以通过margin向上移动自身高度的一半

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

.text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

（5）flex布局

如果不考虑兼容性，很完美的方案：

1
2
3
4
.container {
  display: flex;
  align-items: center;
}

（6）grid布局

显然兼容性有着问题的方案：

1
2
3
4
.container {
  display: grid;
  align-items: center;
}

（7）display: table-cell + vertical-align: middle

1
2
3
4
.container {
  display: table-cell;
  align-items: middle;
}

平时没怎么用，不知道有什么缺点呢~

（8）绝对定位和margin: auto

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

.text {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 30px;
}

一定要指定子元素的高度，否则子元素就会充满父元素。

利用margin: auto居中的原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father {
  position: relative;
  width: 500px;
  height: 500px;
}
.child {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 50px;
}
  • 优点：兼容性好
  • 缺点：子元素需要指定宽高（否则会充满父元素）

原理：以水平方向举例，垂直方向相同。

当绝对定位的元素只定义了一个方向属性时（比如left），并且元素没有利用width指定宽度，宽度是0；当同时指定了相反的两个方向的属性时且相等（left和right都为0），此时如果没有指定width，则宽度会充满父元素，自定宽度会沿着left摆放。

此时指定marign：

  1. 如果一侧定值，一侧auto，auto为剩余空间大小
  2. 如果两侧均是auto，则平分剩余空间，所以就居中了。

块级元素利用margin: 0 auto水平居中的原理也是这样。

参考