不确定宽高盒子的上下左右居中的八种方式

1. 使用flex布局实现居中对齐

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

2. 使用绝对定位实现居中对齐

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

3. 使用table布局实现居中对齐

.container {
  display: table;
}
.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

4. 使用grid布局实现居中对齐

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

5. 使用inline-block和text-align实现居中对齐

.container {
  text-align: center;
}
.box {
  display: inline-block;
  vertical-align: middle;
}

6. 使用float和margin实现居中对齐

.container::after {
  content: "";
  display: block;
  clear: both;
}
.box {
  float: left;
  margin: auto;
}

7. 使用transform和定位实现居中对齐

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

8. 使用padding和text-align实现居中对齐

.container {
  text-align: center;
}
.box {
  display: inline-block;
  padding: 50px;
}