最可靠居中方式是margin: auto配合显式width，Flex适合现代项目水平垂直居中，text-align仅作用于行内内容，绝对定位需父容器relative且用transform避免宽度依赖。
用 margin: auto 居中块级元素最可靠
对单个固定宽度的 常见错误是忘记给元素设 现代项目首选 关键不是只写 立即学习“前端免费学习笔记（深入）”； 容易踩的坑：给一个 当元素需要脱离文档流（比如模态框、提示气泡），用 用 width + margin: 0 auto 是最直接、兼容性最好的方式。它不依赖 Flex 或 Grid，IE6+ 都能正常工作。
width —— 没有宽度的块级元素默认占满父容器，margin: auto 就失效了。
width（如 width: 600px 或 width: 80%）display: inline-block 或浮动元素，否则可能塌陷position: absolute 元素（此时要用 left: 50% + transform: translateX(-50%)）Flex 布局居中：一行代码搞定水平+垂直
display: flex，尤其需要同时水平+垂直居中时，比传统方法简洁得多。justify-content: center，而是要配合 align-items: center 和父容器高度控制。否则在无高度的父容器里，垂直居中不会生效。
height: 100vh）或内容撑开flex-item，无需额外设置flex-wrap 和某些属性有 bug，纯居中场景影响不大文本内容居中：别混淆
text-align 和 margin
text-align: center 只影响**行内内容**（文字、图片、 等）在块级父容器内的水平对齐，和块级元素自身居中无关。 设 text-align: center，结果发现整个段落没居中——其实是你该给它的父容器设，而不是 自身。
text-align 不会影响 display: block 子元素的位置display: block 后再用 margin: 0 auto
line-height（单行）或 display: table-cell（多行，已过时）或 Flex（推荐）
绝对定位居中：适合脱离文档流的弹窗类元素
position: absolute 配合偏移是稳妥选择。但要注意：父容器必须设 position: relative，否则会相对于 定位。left: 50% + transform: translateX(-50%) 比 margin-left: -宽度一半 更安全，因为不需要预先知道元素宽度。
left: 50% + transform: translateX(-50%)
top: 50% + transform: translateY(-50%)
position: relative
实际项目中，margin: auto 和 Flex 是主力；文本对齐别误用 text-align 控制块位置；绝对定位看似灵活，但一不小心就脱出视口。真正难的不是写法，而是判断该用哪一种——取决于元素是否脱离流、是否需要响应式、是否要兼容老浏览器。
