如何让 div 在网页中完美居中（水平+垂直）_网络技术

如何让 div 在网页中完美居中（水平+垂直）

发布时间 - 2025-12-26 00:00:00 点击率：次

使用 flexbox 将 body 设为全高弹性容器，并设置 justify-content 和 align-items 均为 center，即可实现子元素在视口内绝对居中；需注意重置默认 margin、设置 height: 100vh，并避免嵌套 flex 居中导致的偏差。

要让一个

在整个网页中精确水平且垂直居中（即相对于视口中心），最简洁可靠的现代方案是利用 CSS Flexbox。关键在于：将根容器（通常是 body）配置为一个具有完整视口高度的弹性上下文，并启用双向居中。

以下是推荐的完整实现：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 占满整个视口高度 */
  margin: 0;               /* 清除浏览器默认 body 外边距 */
}

对应 HTML 结构保持不变，但需确保 .box 是 body 的直接子元素（如示例所示）：

Want to play a round?

Cards:

Sum:

补充优化建议：

.box 中 width: max-content（而非 50vh）更利于内容自适应，配合 padding 提升可读性；
移除 .box 自身的 display: flex（除非内部有复杂布局需求），避免冗余嵌套 flex 容器干扰居中逻辑；
若页面存在滚动或动态内容，该方案仍能稳定工作——因为 100vh 基于当前视口，且 flex 居中不依赖绝对定位或 JS 计算。

✅ 总结：
核心三要素 = display: flex + justify-content: center + align-items: center + height: 100vh + margin: 0。
这是目前兼容性好（支持所有现代浏览器及 IE11）、语义清晰、无需 JavaScript 的最优解。

# css # javascript # java # html # js # 浏览器 # 垂直居中 # 绝对定位

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Java class文件格式之数据类型（二)_动力节点Jav

下一篇：如何实现docker容器的健康检查？HEALTHCHECK指

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Java class文件格式之数据类型（二)_动力节点Jav

下一篇：如何实现docker容器的健康检查？HEALTHCHECK指

如何让 div 在网页中完美居中（水平+垂直）

BLACKJACK