HTML div标签实现垂直居中的方法？Flex布局结合应用-html教程-PHP中文网

最稳、最推荐的方案是display: flex + align-items: center，但必须满足两个硬条件：父容器启用flex布局且有明确高度（如height: 100vh），否则无效；失效主因包括父容器未设display: flex、高度塌陷、子元素脱离文档流或存在样式冲突。

html div标签实现垂直居中的方法？flex布局结合应用

最稳、最推荐的方案就是 display: flex + align-items: center，但必须同时满足两个硬条件：父容器启用 flex 布局，且有明确高度（比如 height: 100vh）；否则写了也白写。

为什么 `display: flex` + `align-items: center` 不生效？

很多人复制了代码却没效果，问题几乎都出在上下文约束上：

父容器没加 display: flex —— align-items 对非 flex 容器完全无效
父容器高度塌陷（例如只写了 width、没设 height 或 min-height，内部又没内容撑开）—— flex 的交叉轴没长度参考，“center”就无从计算
子元素是 display: block 且宽度为 100% —— 这不影响垂直对齐，但容易让人误判整个逻辑崩了
margin: auto 在 Safari 中会和 flex 居中冲突，导致子元素上下偏移，务必避免混用

`body` 作为父容器时的关键配置

要让 .box 在整个视口居中，body 必须主动“撑高”并启用 flex：

清除默认 margin: 0，避免浏览器样式干扰
设置 height: 100vh（不是 100%），确保它占满视口高度
同时写 justify-content: center（水平）和 align-items: center（垂直）
子元素无需设 position、transform 或负 margin

示例 CSS：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 400px;
  height: 400px;
  background-color: orange;
}