元素水平垂直居中？

• Flexbox（弹性盒子布局）： 使用 Flexbox 是一种简单而强大的居中方法。对于容器元素，设置 display: flex;，并通过 justify-content 和 align-items 属性将子元素水平和垂直居中。

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

• Grid（网格布局）： 使用 CSS Grid 布局也是一种现代的方法。对于容器元素，设置 display: grid;，并通过 place-items 属性将子元素水平和垂直居中。

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

• Absolute/Relative 定位： 使用绝对定位和相对定位，通过将子元素的左上角定位到父元素的中心来实现居中。

.container {
  position: relative;
}

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

# 或
.centered {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

# 同上 inset属性为简写
.centered {
  position: absolute;
  inset: 0;
  margin: auto;
}

• Text Align 和 Line Height： 对于行内元素或内联块级元素，可以使用 text-align: center; 和 line-height 的方法实现垂直居中。

.container {
  text-align: center;
}

.centered {
  line-height: 100px; /* 与容器高度相同 */
}

• Flexbox + Margin Auto： 在 Flexbox 布局中，可以使用 margin: auto; 的技巧将子元素水平垂直居中。

.container {
  display: flex;
}

.centered {
  margin: auto;
}

• Grid + Place-Content： 使用 CSS Grid 布局中的 place-content 属性可以同时设置水平和垂直居中。

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