css中常用的水平垂直居中的方法（六种详细布局的方法）

CSS中实现元素的水平垂直居中主要有以下六种方法：

1. 使用flexbox布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 使用grid布局

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

3. 使用绝对定位和transform

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

4. 使用绝对定位和margin:auto

.parent {
  position: relative;
}
.child {
  width: 50%;
  height: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

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

.parent {
  height: 100px;
  line-height: 100px; /* 等于容器的高度 */
}
.child {
  display: inline-block;
  vertical-align: middle;
}

6. 使用::before伪元素和line-height（适用于单行文本）

.parent {
  height: 100px;
  text-align: center;
  position: relative;
}
.parent::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

这些方法可以实现元素的水平垂直居中，具体使用哪一种取决于布局的具体需求和兼容性要求。