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

在CSS中，实现盒子不确定宽高的上下左右居中有很多种方法，以下是八种常见的居中方法：

1. 使用flex布局
2. 使用grid布局
3. 使用绝对定位和transform
4. 使用绝对定位和margin auto
5. 使用line-height（适合单行文本）
6. 使用table-cell和vertical-align（适合内部元素是单行的情况）
7. 使用after伪元素和vertical-align（适合内部元素是单行的情况）
8. 使用margin负值（适合已知宽高）

以下是每种方法的示例代码：

1. Flex布局

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

<div class="parent">
  <div class="child">Content</div>
</div>

2. Grid布局

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

<div class="parent">
  <div class="child">Content</div>
</div>

3. 绝对定位和transform

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

<div class="parent">
  <div class="child">Content</div>
</div>

4. 绝对定位和margin auto

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

<div class="parent">
  <div class="child">Content</div>
</div>

5. line-height（适合单行文本）

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

<div class="parent">
  <div class="child">Content</div>
</div>

6. table-cell和vertical-align（适合内部元素是单行的情况）

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

<div class="parent">
  <div class="child">Content</div>
</div>

7. after伪元素和vertical-align（适合内部元素是单行的情况）

.parent {
  position: relative;
}
.parent::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

<div class="parent">
  <div class="child">Content</div>
</div>

8. 使用margin负值（适合已知宽高）

.child {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

<div class="parent">
  <div class="child">Content</div>
</div>

以上每种方法都有各自的使用场景，你可以根据实际情况选择合适的方法。