0 引子

按照需要居中的目标种类，将元素居中的方法分为文字、块级元素和脱离文档流元素三类。掌握这三类元素的居中，基本就能应对超90%的使用场景。话不多说，直入正题！

1 文字居中

1.1 水平居中（`text-align: center;`）

使用 text-align: center; 即可。

示例：

<html>
  <div class="parent">
    <div class="son">子组件文字（我要居中)</div>
  </div>
</html>

<style>
.parent {
  height: 400px;
  width: 100%;
  background: #ccc;
}

.son {
  color: blueviolet;
  font-size: 32px;
  text-align: center; // 文字水平居中
}
</style>

效果：

text-align 属性默认值 left（一般情况下是），且会继承父组件的设置。

示例：

<style>
.parent {
  height: 400px;
  width: 100%;
  background: #ccc;
  text-align: center; // 放在父组件里，由于继承效果，一样会对子组件生效
}

.son {
  color: blueviolet;
  font-size: 32px;
}
</style>

1.2 垂直居中（`line-height`）

如果是单行文字，只需定义文字的行高 line-height 属性，使得行高和需要居中对齐的组件高度一致即可。

示例：

<style>
.parent {
  height: 400px;
  width: 100%;
  background: #ccc;
}

.son {
  height: 300px; // 居中对齐的元素高度
  background: orange;
  color: blueviolet;
  font-size: 32px;
  line-height: 300px; // 将行高设置成盒子的高度，文字默认会处在每行的垂直居中位置
}
</style>

效果：橙色为子组件，对齐子组件的高度垂直居中了。

如果子组件仅仅只是文字，高度是默认撑开的，那么就要根据父组件的高度设置居中。

<style>
.parent {
  height: 400px; // 此时要居中对齐的元素高度
  width: 100%;
  background: #ccc;
}

.son {
  height: auto; // 子组件高度默认，此行可以省略
  background: orange;
  color: blueviolet;
  font-size: 32px;
  line-height: 400px; // 将行高设置成盒子的高度，文字默认会处在每行的垂直居中位置
}
</style>

效果：

line-height 属性会将元素撑开。

如果是多行文字，设置行高的方法显然就不好使了，这个时候就要用到块级元素的居中方法了，请接着往下看。

2 块级元素

2.1 水平居中（`margin: 0 auto;` 、 `flex`）

如果把块级元素当成文字设置居中 text-align: center;，结果只会把子组件里的文字居中。所以块级元素要想水平居中：

方法一，最简单的就是对子组件设置 margin: 0 auto;。

<style>
.parent {
  height: 400px;
  width: 100%;
  background: #ccc;
}

.son {
  margin: 0 auto; // 块级元素自身设置 margin，最简单的水平居中
  height: 200px;
  width: 280px;
  background: orange;
  color: blueviolet;
  font-size: 32px;
}
</style>

效果：简简单单实现居中。

方法二，使用 flex。

示例：

<style>
.parent {
  height: 400px;
  width: 100%;
  background: #ccc;
  display: flex; // 父组件设置 flex，子组件都要弹性布局
  justify-content: center; // 子组件沿主轴（默认水平）居中
}

.son {
  height: 200px;
  width: 280px;
  background: orange;
  color: blueviolet;
  font-size: 32px;
}
</style>

效果不错， 且这个方法是可以同时居中多个子组件的！

子组件会先组成一个整体，然后再居中。（子组件的 flex 布局细节以后有机会再展开聊聊。）

2.2 垂直居中

块级元素的垂直居中，建议直接用 flex。

示例：

<style>
.parent {
  height: 400px;
  width: 100%;
  background: #ccc;
  /* flex 居中三件套，请牢记！ */
  display: flex; // 父组件设置 flex，子组件都要弹性布局
  justify-content: center; // 子组件沿主轴（默认水平）居中
  align-items: center; // 子组件沿副轴（默认垂直）居中
}

.son {
  height: 200px;
  width: 280px;
  background: orange;
  color: blueviolet;
  font-size: 32px;
}
</style>

效果：

补充：居中三件套中的主轴、副轴是根据 flex-direction 设置的，默认值 row（即表示水平轴），一般情况下很少去修改设置，记住默认水平是主轴就行。

填坑：多行文字的垂直居中，可以把文字当成块级元素，直接使用 flex 居中三件套中的副轴居中。如果感觉文字不服帖，就转成块级元素 display: block; 再操作。

<style>
.parent {
  height: 400px;
  width: 100%;
  background: #ccc;
  display: flex;
  justify-content: center; 
  align-items: center; 
}

.son {
  height: 200px;
  width: 280px;
  background: orange;
  color: blueviolet;
  font-size: 32px;
  /* flex 居中三件套 */
  display: flex;
  justify-content: center; // 注意，这里的水平居中对文字是无效的
  align-items: center; // 副轴居中生效，垂直居中
  text-align: center; // 水平居中需要再补一个 text-align
}
</style>

效果：

3 脱离文档流元素（定位法）

脱离文档流的元素，就比如页面的弹窗、漂浮的标题或LOGO等，一般会设置 position: fixed; 或者 position: absolute;。

这类元素的居中，其实也是可以使用 flex 居中三件套的，但是使用的时候一定要找准父元素。

如果子组件设置了 position: absolute;，一定要在父组件设置 position: relative;，否则你的子组件会跟别人跑的！

不过这一节要补充的是另一种方法：定位法。

3.1 水平居中

示例：

<style>
.parent {
  position: relative; // 一定要设置，否则子组件就去找最近的一个设置了 relative 的父组件，直至根元素
  height: 400px;
  width: 100%;
  background: #ccc;
}

.son {
  position: absolute; // 脱离文档流，left、top 等定位属性只有在脱离文档流的情况下才会生效
  height: 200px;
  width: 280px;
  background: orange;
  color: blueviolet;
  font-size: 32px;
  /* 定位法 */
  left: 50%; // 子组件向右偏移 50% 父组件宽度的距离，注意谁是要定位的父组件！
  transform: translateX(-50%); // 子组件在水平方向向左偏移自身宽度 50% 的距离。
}
</style>

效果：

3.2 垂直居中

垂直居中和水平居中原理一样。

示例：

<style>
.parent {
  position: relative; // 父组件
  height: 400px;
  width: 100%;
  background: #ccc;
}

.son {
  position: absolute; // 脱离文档流
  height: 200px;
  width: 280px;
  background: orange;
  color: blueviolet;
  font-size: 32px;
  /* 定位法 */
  top: 50%; // 子组件向下偏移 50% 父组件高度的距离，注意谁是父组件！
  transform: translateY(-50%); // 子组件在垂直方向向上偏移自身高度 50% 的距离。
}
</style>

效果：

水平垂直居中一起用：

<style>
.son {
  position: absolute; // 脱离文档流
  height: 200px;
  width: 280px;
  background: orange;
  color: blueviolet;
  font-size: 32px;
  /* 定位法 */
  left: 50%;
  top: 50%; 
  transform: translate(-50%, -50%); // 如未生效，就改成 transform: translateX(-50%) translateY(-50%);
}
</style>

效果：

额外需要再说明一下，当设置 left: 50%; 之后，元素被内容撑开到宽度 50% 就会换行，默认自适应的最大宽度被限制在 50%，即使设置 max-width: 100% 也是无效的， width: 100%; 可以生效，不过这样宽度就失去自适应了。

4 总结

总结一下，元素水平垂直居中的常用方法：

文字，text-align: center; 、 line-height；
块级，margin: 0 auto; 、 flex 居中三件套；
脱离文档流，flex 居中三件套、定位法（left top transform: translate(...）。

元素居中的方法不仅仅只是上述这些，不过掌握这些基本能够应对大部分的情况了，一定要理解原理。

笔记主要为自用，欢迎友好交流！

【CSS笔记】元素居中的3种常用方法