水平垂直居中的六种方法

1. 使用 Flexbox

Flexbox 是一个现代的布局模型，可以轻松实现元素的水平和垂直居中。

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

2. 使用 Grid

CSS Grid 是另一种强大的布局系统，也可以用来居中元素。

.container {
  display: grid;
  height: 100vh; /* 视窗高度 */
}
.container > div {
  align-self: center; /* 垂直居中 */
  justify-self: center; /* 水平居中 */
}

3. 使用绝对定位和 transform

通过绝对定位和 transform 属性，可以实现元素的居中。

.container {
  position: relative;
  height: 100vh; /* 视窗高度 */
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 使用表格布局

使用 display: table 和 display: table-cell 可以模拟表格布局来居中元素。

.container {
  display: table;
  height: 100vh; /* 视窗高度 */
}
.centered {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

5. 使用 line-height

对于单行文本，可以通过设置 line-height 等于容器的高度来实现垂直居中。

.container {
  height: 100vh; /* 视窗高度 */
  line-height: 100vh; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

6. 使用 calc 和绝对定位

通过计算元素的偏移量，可以实现居中。

.container {
  position: relative;
  height: 100vh; /* 视窗高度 */
}
.centered {
  position: absolute;
  top: calc(50% - 50px); /* 假设元素高度为100px */
  left: calc(50% - 50px); /* 假设元素宽度为100px */
}