如何实现一个水平垂直居中的元素

实现一个水平垂直居中的元素在网页设计中是一个常见需求，可以通过多种方法来实现。以下是几种常见方案及其适用场景的解释：

1. 使用Flexbox（推荐）

代码示例：

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

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 100vh;          /* 确保容器有足够的高度 */
}

适用场景：

• 现代浏览器项目、移动端、单行或多行内容，尤其是需要灵活调整子元素排列时
• 注意点：父容器需明确高度（非 auto），父容器可以是固定高度或百分比高度

2. 使用Grid布局（推荐）

代码示例：

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