未知高度和宽度元素的水平垂直居中的方案有哪些， 简单手写一下？

要在未知高度和宽度的元素中实现水平和垂直居中，可以使用多种 CSS 技巧。以下是几种常见的方案以及它们的简单手写实现：

1. Flexbox

HTML：

<div class="container">
  <div class="centered-element">Centered</div>
</div>

CSS：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使容器填满视口 */
}

.centered-element {
  /* 元素的样式 */
}

2. Grid

HTML：

<div class="container">
  <div class="centered-element">Centered</div>
</div>

CSS：

.container {
  display: grid;
  place-items: center; /* 同时水平和垂直居中 */
  height: 100vh; /* 使容器填满视口 */
}

.centered-element {
  /* 元素的样式 */
}

3. Absolute + Transform

HTML：

<div class="container">
  <div class="centered-element">Centered</div>
</div>

CSS：

.container {
  position: relative;
  height: 100vh; /* 使容器填满视口 */
}

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使元素居中 */
}

4. Line-Height (适用于单行文本)

HTML：

<div class="container">
  <div class="centered-element">Centered</div>
</div>

CSS：

.container {
  height: 100vh; /* 使容器填满视口 */
  line-height: 100vh; /* 设置行高为容器高度 */
  text-align: center; /* 水平居中 */
}

.centered-element {
  display: inline-block;
  vertical-align: middle; /* 垂直居中 */
  line-height: normal; /* 恢复正常行高 */
}