让div居中显示的几种方法

核心问题在于：默认情况下 的高度由内容决定，而非填满整个视口。因此，即使设置了 display: flex 和 justify-content: center，body 的实际高度可能远小于视口，导致子元素无法垂直居中。

✅ 正确做法如下：

1. 重置默认边距：移除 默认 margin，避免偏移；
2. 强制占满视口：设置 height: 100vh，使 body 高度等于浏览器窗口高度；
3. 启用双轴居中：同时设置 justify-content: center（主轴居中 → 水平）和 align-items: center（交叉轴居中 → 垂直）；
4. 优化子容器：.box 可改用 width: max-content 配合 padding，避免 50vh 宽度在小屏下溢出，提升响应性。

以下是完整、可直接使用的 CSS 示例：

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 关键：撑满视口高度 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid #000;
  padding: 1.5rem 2rem;
  width: max-content; /* 更自然的宽度适配内容 */
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.buttons {
  display: flex;
  gap: 0.75rem;
  padding: 10px;
  margin-top: 1rem;
}

button {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

⚠️ 注意事项：

• 不要遗漏 margin: 0 —— 浏览器默认 body margin 会导致整体偏移；
• height: 100vh 是相对视口高度，若页面有滚动条或需兼容移动端 Safari，可考虑 min-height: 100vh 作为更稳健替代；
• 若 .box 内部内容动态变化（如 JS 更新文本），该居中方案仍保持稳定，无需额外 JS 计算；
• 如需支持旧版浏览器（IE10/11），可补充 display: -ms-flexbox 等前缀，但现代项目推荐优先使用标准 Flexbox。

总结：真正的“页面正中央” = 视口级容器 + 双轴 Flex 居中 + 显式高度控制。掌握这一组合，即可零 JS、纯 CSS 实现任意块级元素的精准居中。

以上就是《让div居中显示的几种方法》的详细内容，更多关于的资料请关注golang学习网公众号！