css：居中的几种布局方式

CSS提供了多种方法来实现居中布局，以下是几种常用的居中方式：

1. 使用Flexbox布局:

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

2. 使用Grid布局:

.container {
  display: grid;
  place-items: center; /* 水平垂直居中 */
}

3. 使用绝对定位和transform:

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

4. 使用margin:auto方式（适用于块元素）:

.child {
  width: 50%;
  margin: 0 auto; /* 水平居中 */
}

5. 使用line-height（适用于单行文本）:

.container {
  height: 100px;
  line-height: 100px; /* 与容器高度相同 */
}
.text {
  display: inline-block;
  vertical-align: middle;
}

选择哪种方法取决于具体需求和上下文环境。Flexbox和Grid布局是现代布局的首选，因为它们提供更多灵活性和更好的语义化标签支持。