Flexbox（弹性盒子布局）：

使用 Flexbox 是一种简单而强大的居中方法。对于容器元素，设置 display: flex;，并通过 justify-content 和 align-items 属性将子元素水平和垂直居中。

.container {

	display: flex;

	justify-content: center;

	align-items: center;

}

Grid（网格布局）：

使用 CSS Grid 布局也是一种现代的方法。对于容器元素，设置 display: grid;，并通过 place-items 属性将子元素水平和垂直居中。

.container {
	display: grid;
	place-items: center;
}

Absolute/Relative 定位：

使用绝对定位和相对定位，通过将子元素的左上角定位到父元素的中心来实现居中。

.container {
	position: relative;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
# 或
.centered {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
# 同上 inset属性为简写
.centered {
  position: absolute;
  inset: 0;
  margin: auto;
}

Text Align 和 Line Height：

对于行内元素或内联块级元素，可以使用 text-align: center; 和 line-height 的方法实现垂直居中。

.container {
	text-align: center;
}
.centered {
	line-height: 100px; /* 与容器高度相同 */
}

Flexbox + Margin Auto：

在 Flexbox 布局中，可以使用 margin: auto; 的技巧将子元素水平垂直居中。

.container {
	display: flex;
}
.centered {
	margin: auto;
}

Grid + Place-Content：

使用 CSS Grid 布局中的 place-content 属性可以同时设置水平和垂直居中。

.container {
  display: grid;
  place-content: center;
}