零基础用HTML编辑网页实现整页内容的水平垂直双重居中-html教程-PHP中文网

用 display: flex + justify-content: center + align-items: center 实现水平垂直居中，但父容器必须设置可计算高度（如 min-height: 100vh），否则 align-items: center 因交叉轴无尺寸而静默失效；子元素不能脱离文档流，且需注意 flex-direction 变化时属性作用轴互换。

零基础用html编辑网页实现整页内容的水平垂直双重居中

直接给结论：用 display: flex + justify-content: center + align-items: center，再配上 height: 100vh，三行 CSS 就能稳稳居中，零基础也能抄着跑通。

父容器必须设高度，否则 flex 居中无效

很多人写了 flex 却没效果，问题几乎都出在这儿——div 默认是“内容撑开高度”，没高度就谈不上垂直居中。

必须给父容器（比如或外层 ）加 height: 100vh（视口高度），或 min-height: 100vh 更稳妥
如果父容器被其他样式干扰（比如 float、position: absolute），flex 会失效；检查开发者工具里 computed styles 确认 display 和 height 是否生效


别在  上直接写 flex —— 默认有 margin，先清掉：body { margin: 0; }

text-align: center 不等于整页居中
text-align: center 只控制**块级容器内联内容的水平对齐**，它不管垂直方向，也不影响块级子元素本身的位置。
对单行文字有效，但对 、、 这类块级元素无效
如果误以为给  加 text-align: center 就能居中整个页面，结果只会看到文字居中、其他元素还卡在左上角

真要用它，得配合 line-height: 100vh（仅限单行文本），但一旦换行或字号变化，立刻错位
绝对定位 + transform 是兼容兜底方案
如果你项目要支持 IE11 或老版 Safari，flex 可能不稳，这时用 position: absolute + transform: translate(-50%, -50%) 更可靠。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										

父容器必须设 position: relative（否则 top: 50% 会相对于整个 viewport 定位，偏到天边）
子元素写法固定：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

不用算宽高，translate 的百分比永远基于自身尺寸，哪怕文字缩放、响应式变宽也照样居中
注意：如果子元素里还有 transform: scale() 或 rotate()，得合并写，比如 transform: translate(-50%, -50%) scale(1.2)，否则顺序错乱会导致偏移

别碰 margin: auto 配合四边定位
这个写法看着简洁：position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;，但实际坑多，零基础容易卡死。

子元素必须有明确的 width 和 height（不能是 %、max-width 或 fit-content）
Safari 15.4 之前版本对这个组合支持异常，可能左右差几个像素
文字内容宽度随字号/语言动态变化，根本没法写死 width，所以它只适合图标、加载 spinner 这类尺寸固定的元素
新手常漏写四边定位（比如只写 top 和 left），结果 margin: auto 完全不触发

真正零基础起步，就老老实实用 flex：确认父容器有 height: 100vh、没浮动、没绝对定位干扰，一行 display: flex 带两个 center 就完事。复杂点在于容器上下文是否干净，而不是居中逻辑本身。