最稳妥的块级元素水平居中方法是设置固定宽度后使用 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">，然后对这个容器设 <code>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。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 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></picture> + srcset，注意 media 属性只控制资源加载，不影响布局对齐逻辑

对齐问题的本质，是盒模型行为和上下文关系没理清。调试时别急着加样式，先看 computed styles 里 display 是什么、text-align 应用在哪个节点、父容器有没有脱离文档流——这些比写十行 CSS 都管用。