最稳妥的块级元素水平居中方法是设置固定宽度后使用 margin: auto；text-align: center 仅对行内内容有效；图片默认为行内元素，需设 display: block 或用父容器 flex/center 居中。
响应式布局里对齐失效，八成不是代码写错了，而是你没搞清「谁在对齐谁」——text-align 对的是文本内容，justify-content 对的是 flex 子项，margin: auto 只对块级元素生效，而图片默认是行内元素。
图片居中但 margin: 0 auto 不起作用
这是最常被卡住的点：给 <img> 直接加 margin: 0 auto 没反应，因为浏览器把它当行内元素处理，不认块级居中逻辑。
- 必须先让图片“变成块”：
display: block或用父容器接管对齐 - 更稳妥的做法是包一层
<div class="img-container">，然后对这个容器设text-align: center（兼容老浏览器）或display: flex; justify-content: center（现代方案） - 如果父容器有
padding、float或position: absolute，也会干扰居中，优先检查 computed styles 中的display和box-sizing
Flex 容器里文字不居中，却死磕 justify-content
justify-content: center 控制的是 flex 子元素的位置，不是子元素内部的文字。比如 <h1>标题</h1> 在 flex 容器里，想让它文字居中，得在 h1 上加 text-align: center，而不是改容器的 justify-content。
- flex 容器的
justify-content和align-items只影响直接子元素的排列，不影响子元素内部的文本流 - 块级元素（如
h1、p、div）默认占满父宽，所以text-align: center才能生效 - 若子元素本身是
inline或inline-block，先确认它是否已设置display: block，否则text-align不会起效
导航栏三段式对齐（logo 左、菜单中、按钮右）总错位
靠 justify-content: space-between 硬拆三块，容易在小屏或字体缩放时崩掉。真正稳定的方式是用 margin 借力 flex 的自动分配机制。
立即学习“前端免费学习笔记（深入）”；
- 给导航容器设
display: flex; align-items: center -
#logo不加任何margin -
.nav加margin: 0 auto—— 它会自动吃掉左右剩余空间，视觉上就居中了 -
.cta-button默认靠右；若需更稳，加margin-left: auto，而不是margin-right: 0 - 移动端切
flex-direction: column时，记得重置.nav的text-align: center，并把按钮的margin-left: auto改成margin: 0 auto
响应式断点切换对齐方式时，图片位置突然跳变
不是媒体查询没生效，而是你可能在多个断点里重复写了 width: 100% 或 max-width，和 text-align 切换形成冲突。
- 对齐行为（居中/左/右）只应在媒体查询里控制父容器的
text-align或justify-content，不要每个断点都重写图片尺寸 - 避免同时设
width: 100%和max-width: 600px，后者会覆盖前者导致宽度计算异常 - 如果用了
<picture>+srcset，注意media属性只控制资源加载，不影响布局对齐逻辑
对齐问题的本质，是盒模型行为和上下文关系没理清。调试时别急着加样式，先看 computed styles 里 display 是什么、text-align 应用在哪个节点、父容器有没有脱离文档流——这些比写十行 CSS 都管用。
