【CSS】实现div块上下左右居中对齐的5种方式

在CSS中，实现一个div块在其父元素中上下左右居中对齐有多种方法。以下是五种常见的实现方式：

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 {
  position: absolute;
  width: 50%;
  height: 50%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

5. 使用行内块和text-align

.parent {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.child {
  display: inline-block;
}

每种方法都有自己的优点和适用场景，开发者可以根据具体情况选择合适的方法。