如何实现一个垂直水平居中的 div？

如何实现一个垂直水平居中的 div？

回答： 可以使用多种方法实现 div 的垂直水平居中，以下是三种常用方法：

1. 使用 Flexbox（推荐）：

<div class="container">
  <div class="centered">居中内容</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度 */
}

2. 使用绝对定位 + transform：

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

3. 使用 CSS Grid：

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

解析：

• Flexbox 方法：最现代、简洁的解决方案，兼容性好（IE10+），易于理解和维护。
• 绝对定位方法：适用于需要脱离文档流的情况，通过将元素定位到父容器50%位置，再用transform向左上移动自身宽高的一半来精确居中。
• Grid 方法：CSS Grid 的 place-items: center 是最简洁的写法，但兼容性稍差于 Flexbox。

推荐使用 Flexbox 方案，因为它语义清晰、代码简洁、兼容性好，且能自动处理子元素的间距和换行问题。<p style='opacity:0'><a href='https://www.dsiab.com' style='cursor:unset'>本文章由javascript技术分享原创和收集</a></p>