水平垂直居中的几种方法（总结）

1.使用 flexbox 的 justify-content 和 align-items

.parent {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100vh;            /* 需要指定高度 */
}

2.使用 grid 的 place-items: center

.parent {
  display: grid;
  place-items: center;  /* 水平和垂直同时居中 */
  height: 100vh;
}

3.使用 position: absolute 和 transform

.parent {
  position: relative;
  height: 100vh;
}

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

4.使用 table-cell 和 vertical-align: middle

.parent {
  display: table;
  width: 100%;
  height: 100vh;
  text-align: center;          /* 水平居中 */
}

.child {
  display: table-cell;
  vertical-align: middle;      /* 垂直居中 */
}

PS：基本没用过，这个太老了

5.使用 margin: auto（子元素固定宽高）

.parent {
  display: block;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  margin: auto;
}

6.使用 line-height 和 text-align: center（仅限单行文本）

.parent {
  height: 100vh;
  line-height: 100vh;  /* 行高等于容器高度 */
  text-align: center;  /* 水平居中 */
}

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

7.使用 inline-block 和 text-align: center

.parent {
  text-align: center;   /* 水平居中 */
  height: 100vh;
}

.child {
  display: inline-block;
  vertical-align: middle;  /* 垂直居中 */
  margin: auto;
}

8.使用 min-height 和 min-width + flexbox

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  min-height: 100vh;
}

.child {
  min-width: 200px;
  min-height: 200px;
}

9.使用 vh 单位

.parent {
  height: 100vh;
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}

10.使用 absolute + display: flex（嵌套居中）

.parent {
  position: relative;
  height: 100vh;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

11.使用 display: block 和 margin: auto（适用于固定宽高的元素）

.parent {
  display: block;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  margin: auto;
}

12.使用 text-indent 和 white-space: nowrap（适用于文字)

.parent {
  text-align: justify;
  white-space: nowrap;
  text-indent: 50%;
  transform: translateX(-50%);
  height: 100vh;
}