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

参考答案：

要在未知高度和宽度的元素中实现水平和垂直居中，可以使用多种 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;    /* 恢复正常行高 */
}

题目要点：

• Flexbox 和 Grid 是现代 CSS 布局的强大工具，适用于大多数情况。
• Absolute + Transform 是一个经典的解决方案，适用于任何情况。
• Line-Height 是用于简单文本居中的方法。