CSS中实现元素水平居中、垂直居中的6个方法（详解）

在CSS中，实现元素水平居中和垂直居中的方法有很多种，以下是六种常用的方法：

1. 使用flexbox布局
2. 使用grid布局
3. 使用absolute定位和transform
4. 使用text-align和line-height
5. 使用margin:auto
6. 使用::before伪元素和transform

详细解释和代码示例如下：

1. 使用flexbox布局

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

2. 使用grid布局

.parent {
  display: grid;
  place-items: center;
}
 
.child {
  /* content */
}

3. 使用absolute定位和transform

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

4. 使用text-align和line-height

   适用于内联元素或者单行文本

.parent {
  text-align: center;
  height: 100px;
  line-height: 100px;
}
 
.child {
  display: inline-block;
}

5. 使用margin:auto

   适用于块级元素

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

6. 使用::before伪元素和transform

.parent {
  position: relative;
}
 
.child {
  position: absolute;
  ::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }
  display: inline-block;
  vertical-align: middle;
  transform: translateY(50%);
}

以上每种方法都有其适用的场景，开发者可以根据具体需求选择合适的方法。