CSS 居中策略总结

在学习和实践 CSS 的过程中，元素的水平垂直居中是经常会碰到的问题，这里总结了一些常用场景下的居中方案。
更多关于 CSS 的居中问题参考 CHRIS COYIER 写的 Centering in CSS: A Complete Guide 和网站 HOW TO CENTER IN CSS。

---

一、水平居中

1. 行内元素水平居中（inline or inline-* elements）

居中方案：

div {
  text-align: center;
}

兼容性：全浏览器兼容

Example:

See the Pen PjpxLx by Violet_QQY (@violetqqy) on CodePen.

2. 块级元素水平居中（block level elements）

居中方案：

div {
  margin: 0 auto;
}

兼容性：全浏览器兼容（注意正确使用 margin 属性）

Example:

See the Pen rwyoWm by Violet_QQY (@violetqqy) on CodePen.

3. 使用 flex 实现水平居中

居中方案：

div {
  display: flex;
  justify-content: center;
}

兼容性：IE11 以下不兼容

Example:

See the Pen Rgpmvo by Violet_QQY (@violetqqy) on CodePen.

---

二、垂直居中

1. 单行文本垂直居中

居中方案：

div {
  height: 30px;
  line-height: 30px;
}

兼容性：全浏览器兼容

Example:

See the Pen ZyedWN by Violet_QQY (@violetqqy) on CodePen.

2. 多行文本垂直居中

居中方案：使用 table 实现居中

.center-table {
  display: table;
  height: 250px;
  width: 240px;
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

兼容性：全浏览器兼容

Example:

See the Pen ZyedKg by Violet_QQY (@violetqqy) on CodePen.

3. 已知高度的块级元素垂直居中

居中方案：使用绝对定位设置 top 为 50% ，并设置 mergin-top 为负的高度的一半

div {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

兼容性：全浏览器兼容

Example:

See the Pen pweXKM by Violet_QQY (@violetqqy) on CodePen.

4. 未知高度的块级元素垂直居中

居中方案：使用 transform 实现

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

兼容性：IE9 以上

Example:

See the Pen BZWgeM by Violet_QQY (@violetqqy) on CodePen.

5. 使用 flex 实现垂直居中

居中方案：

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

或者

div {
  display: flex;
  align-items: center;
}

兼容性：IE11 以下不兼容 IE11 不完全兼容

Example:

See the Pen PjpMpv by Violet_QQY (@violetqqy) on CodePen.

---

三、水平垂直居中

1. 已知元素宽高水平垂直居中

居中方案：绝对定位配合 margin 属性实现居中

兼容性：全浏览器兼容

Example:

See the Pen wedpZa by Violet_QQY (@violetqqy) on CodePen.

2. 未知元素宽高水平垂直居中

居中方案：绝对定位配合 transform 属性实现居中

兼容性：IE9 以上

Example:

See the Pen EXmQYL by Violet_QQY (@violetqqy) on CodePen.

3. 使用 table 实现水平垂直居中

居中方案：使用 table 的属性 vertical-align: middle; 和块级元素居中方案 margin: 0 auto; 实现居中

兼容性：全浏览器兼容

Example:

See the Pen Ngjydd by Violet_QQY (@violetqqy) on CodePen.

4. 使用 flex 实现水平垂直居中

居中方案：使用 flex 的属性 justify-content: center; 和 align-items: center; 实现居中

兼容性：IE11 以下不兼容 IE11 不完全兼容

Example：

See the Pen Ngjygp by Violet_QQY (@violetqqy) on CodePen.

---

总结

使用 CSS 完全能够实现各种需求的居中方式，但在浏览器兼容方面还有待进一步验证。一般来说，在已知宽高的情况下，使用绝对定位加 margin 属性的方案是最为保守的，基本支持所有主流浏览器。未知宽高的情况下，使用 table 居中几乎没有浏览器兼容限制。 flex 是一个很好的解决方案，但是 IE11 以下对 flex 的兼容不佳，但在移动设备上体验良好，使用时可以综合考虑。