博主从盒子分类的角度进行描述：行盒、行块盒，常规流块盒，绝对定位元素（绝对定位块盒）

水平居中

行盒、行块盒水平居中：text-aligin

直接设置行盒、行块盒的父元素 text-aligin: center;

<div class='containing_block'>
    <span>文本</span>
<div>

.containing_block {
    text-align: center;
}

补充：

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性，如果 position 属性是 static、relative 或 sticky，则包含块由最近的祖先块元素的内容区（content-box）的边缘组成。
常见的行盒：span标签、a链接、img标签、input标签、文字（默认包裹匿名行盒）
行盒、行块盒只存在于常规流中

常规流块盒的水平居中：width + margin

定宽，然后设置左右margin设为auto

<div class='containing_block'>
    <!-- 目标盒子 -->
    <div class='target'></div>
<div>

body {
  margin: 0;
}
.containing_block {
  height: 100px;
  background-color: blue;
}
.target {
  width: 120px; margin: 0px auto;
  height: 100px;
  line-height: 100px;
  color: white;
  background-color: red;
}

补充：

常规流块盒的width默认值为auto, 表示吸收剩余空间，左右margin设为auto时，也表示吸收剩余空间，但width优先，左右miargin优先级一致。
这里将目标盒子定宽后，将其左右margin设为auto，左右margin各吸收一半水平方向上的剩余空间，目标盒子自然水平居中。

绝对定位元素的水平居中: width + left + right + margin

定宽，并设置左右的坐标为0，即left: 0; right: 0;，最后设置左右margin为auto：

<div class='containing_block'>
    <!-- 目标盒子 -->
    <div class='target'></div>
<div>

body {
  margin: 0;
}
.containing_block {
  height: 100px;
  background-color: blue;
  position: relative;
}
.target {
  position: absolute;
  width: 100px;
  left: 0;  right: 0; 
  margin: 0px auto;
  height: 100px;
  color: white;
  background-color: red;
}

补充：

如果 position 属性为 absolute ，包含块由它的最近的 position 的值不是 static 的祖先元素的内边距区（padding-box）的边缘组成。
绝对定位元素的width默认值为auto，表示吸收剩余空间，left和right默认值为auto，表示吸收剩余空间，左右外边距设为auto时，表示吸收剩余空间，right的优先级 > left的优先级 > width的优先级 > 左margin = 右margin
这里将目标盒子定宽，设置左右的坐标为0，并将左右margin设为auto后，各吸收一半的剩余空间，目标盒子自然水平居中。

绝对定位元素的水平居中：left + transform

left设置为50%，然后设置 transform: translateX(-50%);

对宽度没有要求

<div class='containing_block'>
    <span>文本</span>
<div>

body {
  margin: 0;
}
.containing_block {
  height: 100px;
  background-color: blue;
  position: relative;
}
.target {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 100px;
  height: 100px;
  color: white;
  background-color: red;
}

补充：

绝对定位元素的left属性是基于元素的左边缘（包含margin）相对于包含块的左边缘进行的移动，其值可以设置为百分比，该百分比的取值相对于包含块的宽度。
transform属性中，translateX()可以设置百分比，该百分比相对于自身的宽度，所以可以将translateX()设置为-50%，对元素进行位置修正，此时要保持左margin为默认值0。

垂直居中

行盒的垂直居中：line_height

设置行盒所在元素的行高为整个区域的高度

<div class='containing_block'>
    <!-- 目标盒子 -->
    <span>文本</span>
<div>

.containing_block {
    height: 100px;
    line-height: 100px;
}

绝对定位元素的垂直居中：top + transform

top设置为50%，然后设置 transform: translateY(-50%);

<div class='containing_block'>
    <span>文本</span>
<div>

body {
  margin: 0;
}
.containing_block {
  height: 100px;
  background-color: blue;
  position: relative;
}
.target {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 100px;
  height: 100px;
  color: white;
  background-color: red;
}

补充：

绝对定位元素的top属性是基于元素的上边缘（包含margin）相对于包含块的上边缘进行的移动，其值可以设置为百分比，该百分比的取值相对于包含块的宽度。
transform属性中，translateY()可以设置百分比，该百分比相对于自身的高度，所以可以将translatey()设置为-50%，对元素进行位置修正，此时要保持上margin为默认值0。

绝对定位元素的垂直居中: height + left + right + margin

定高，并设置上下的坐标为0，即top: 0; bottom: 0;，最后设置上下margin为auto：

<div class='containing_block'>
    <!-- 目标盒子 -->
    <div class='target'></div>
<div>

body {
  margin: 0;
}
.containing_block {
  height: 100px;
  background-color: blue;
  position: relative;
}
.target {
  position: absolute;
  top: 0; bottom: 0;
  height: 20px;
  margin: auto 0px;
  color: white;
  background-color: red;
}

补充：

如果 position 属性为 absolute ，包含块由它的最近的 position 的值不是 static 的祖先元素的内边距区（padding-box）的边缘组成。
绝对定位元素的height默认值为auto，表示吸收剩余空间，top和bottom默认值为auto，表示吸收剩余空间，上下外边距设为auto时，表示吸收剩余空间，bottom的优先级 > top的优先级 > height的优先级 > 上margin = 下margin
这里将目标盒子定高，设置上下的坐标为0，并将上下margin设为auto后，左右margin各吸收一半的垂直方向上的剩余空间，目标盒子自然垂直居中。

总结：

对宽度有要求的都涉及剩余空间的吸收；
灵活设置padding，也可以实现居中的效果。

关于水平垂直居中的总结