现代项目首选display: grid或flex实现全页居中，place-items: center最简可靠；需设html { height: 100% }、body { margin: 0; height: 100vh; display: grid; place-items: center }，否则无参考高度导致失效。
直接让整个页面内容在视口里水平垂直居中，现代项目首选 display: grid 或 display: flex，而不是靠 margin: 0 auto 或 text-align: center——后者根本做不到垂直居中，也管不了整个页面高度。
用 place-items: center 实现最简整体居中
这是目前最干净、最少出错的方式，只需两行 CSS，且不依赖子元素尺寸或父容器显式定位。
-
body必须设height: 100vh，否则网格没有参考高度；html也要加height: 100%防止塌陷 - 不要给
body设margin，默认8px会破坏居中，务必重置：body { margin: 0; } -
place-items: center等价于justify-items: center; align-items: center，对所有直接子元素生效 - 如果页面有多个顶级块（比如
<header>、<main>、<footer>），它们会并排居中——这不是你想要的？那就只包一层<div class="page-center">再居中它
html { height: 100%; }
body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
}
用 flex 居中时为什么子元素“掉下去”了？
常见现象：加了 display: flex; justify-content: center; align-items: center，但内容没居中，反而贴顶或溢出。根本原因是父容器没高度。
-
align-items: center垂直居中依赖父容器有明确高度，body默认是“内容高度”，不是视口高度 - 只写
height: 100%不够——html和body都得设，且不能有min-height干扰计算 - 如果页面内容超过一屏，
flex居中会让整个内容块悬浮在视口中央，滚动时内容会“悬空”——这不是 bug，是预期行为；需改用min-height: 100vh替代height - 别在
body上同时用flex和grid，CSS 会忽略后者
绝对定位 + transform 还值得用吗？
在需要兼容 IE11 或某些嵌入式 WebView 的老环境里仍需保留，但日常开发中它是最容易翻车的方案。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)要求目标元素不能有display: inline，否则transform对齐失效 - 父容器必须是定位上下文（
position: relative或非static），而body默认是static，所以得显式加body { position: relative; } - 该方式会让元素脱离文档流，后续元素会“无视”它占据的空间，可能引发布局错位
- 无障碍阅读器可能跳过绝对定位内容，如用于主视觉区域，需补
role="region"和aria-label
为什么 margin: 0 auto 永远不能垂直居中？
它只作用于块级元素的**外边距计算逻辑**，浏览器只对左右外边距做自动分配，上下外边距永远按声明值渲染（0 就是 0）。
- 即使给元素设了
height和margin: auto，它也只会水平居中，垂直方向完全没反应 - 有人误以为 “父容器设
text-align: center+ 子元素margin: 0 auto” 能垂直居中，其实只是文本基线对齐造成的视觉错觉 - 唯一能靠
margin垂直居中的场景，是已知宽高 + 绝对定位 + 负margin（例如top: 50%; margin-top: -50px;），但必须硬编码像素值，响应式下立即失效
真正麻烦的不是选哪种方法，而是混用时的隐性冲突——比如给 body 加了 grid 又偷偷加了 flex，或者忘了重置 body margin。居中本身很简单，难的是在真实项目里守住那几行关键 CSS 不被覆盖、不被误解。
