侧边栏内部菜单项垂直居中应使用flex布局而非margin：将侧边栏设为display: flex; flex-direction: column; justify-content: center; height: 100vh，重置默认margin，避免对单独设margin-top破坏对齐逻辑。
侧边栏内部菜单项垂直居中用 flex 而非 margin
侧边栏容器本身是 position: fixed，宽度固定（如 width: 280px），但内部菜单项（<nav></nav> 或 <ul></ul>）若想在高度方向上居中，不能靠 margin-top 算像素——因为侧边栏高度是 100vh，而菜单内容高度不固定，一改就错位。
正确做法是把侧边栏设为 flex 容器，用 align-items: center 或 justify-content: center 控制子元素位置。但注意：只对直接子元素生效，且需避免父级 overflow: hidden 截断内容。
- 给侧边栏外层加
display: flex; flex-direction: column; justify-content: center; height: 100vh; - 若菜单项是
<ul></ul>，它默认有margin-block，先重置margin: 0; - 不要对
<li>单独设margin-top，会破坏 flex 对齐逻辑 - 如果顶部要留空（比如 logo）、底部要留空（比如用户信息），改用
gap: 1rem或padding更可控
抽屉按钮（汉堡图标）在 header 中水平居中怎么写
常见错误是给按钮加 margin: 0 auto 却没设 display: block，或放在 flex 容器里却忘了 justify-content。按钮本身是行内元素，margin: 0 auto 对它无效。
- 若父容器是
header且用了display: flex，直接加justify-content: center; - 若父容器是块级、无 flex，按钮需显式设
display: block;+margin: 0 auto; - 避免用
text-align: center包裹按钮——它只对行内内容有效，且易受字体大小、行高干扰 - 移动端小屏下按钮可能被截，记得加
min-width: min-content;防压缩
遮罩层（overlay）里的关闭按钮怎么绝对居中
遮罩层是 position: fixed 全屏覆盖，里面放一个关闭按钮（如 × 图标），需要严格居中。用 left: 50%; top: 50%; transform: translate(-50%, -50%) 是最稳方案，比负 margin 更可靠——因为不用预知按钮宽高。
- 按钮必须设
position: absolute;，且父遮罩层要有position: relative;或position: fixed; - 别用
top: 50%; margin-top: -12px;这类硬编码，图标换尺寸就崩 - 如果按钮是伪元素（
::before），确保父元素有content: ""和显式宽高，否则transform无基准 - 为防 Safari 渲染偏差，可加
will-change: transform;到按钮上（仅当性能确实掉帧时启用）
抽屉菜单展开后，主内容区的居中卡片怎么不被挤偏
很多实现会用 transform: translateX(280px) 推开主内容区来腾出空间，但如果主内容区里有居中的卡片（比如 margin: 0 auto 的 max-width: 800px 容器），这个平移会让卡片相对视口偏右，看起来“没居中”了。
- 真正居中的是相对于视口，不是相对于被平移后的父容器。所以卡片本身无需改样式
- 问题常出在主内容区用了
position: relative后再做transform——这会让margin: 0 auto失效，因块级元素在相对定位下仍按正常流计算宽度 - 解决方法：主内容区保持
position: static，只对它的直接子容器（如.main-wrapper）做transform - 更干净的做法是抽屉用
z-index叠在上方，主内容区不动，靠body overflow: hidden封锁滚动，避免任何位移操作
transform 时，它下面所有子元素的 margin、text-align、flex 行为都可能悄然改变。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
