首页 > 文章 > 前端

让div居中显示的几种方法

时间：2026-01-15 21:33:44 269浏览收藏

golang学习网今天将给大家带来《如何让div居中显示在页面中央》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

如何精确将 div 元素居中于网页正中央

使用 Flexbox 实现元素在视口内水平垂直完全居中，关键在于为 body 设置 100vh 高度并同时启用 justify-content 和 align-items 居中。

要让一个

精确位于整个网页（即视口）的正中心，仅靠 justify-content: center 是不够的——它只能实现水平居中；若缺少 align-items: center 且容器本身没有明确高度，垂直居中将失效。

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

✅ 正确做法如下：

重置默认边距：移除默认 margin，避免偏移；
强制占满视口：设置 height: 100vh，使 body 高度等于浏览器窗口高度；
启用双轴居中：同时设置 justify-content: center（主轴居中 → 水平）和 align-items: center（交叉轴居中 → 垂直）；
优化子容器：.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学习网公众号！

前往漫画官网入口并下载 ➜