根本原因是基础对齐体系不稳，需先统一 box-sizing: border-box 并用 Flex/Grid 替代手动对齐，媒体查询仅作尺寸微调。
不同设备上CSS布局对齐偏移，根本原因往往不是媒体查询没写，而是对齐逻辑本身依赖了不稳定的属性（比如固定 margin、float、未归一化的盒模型），导致在断点切换时“表面生效、底层错位”。媒体查询里统一设对齐方式只是表层操作，关键得先稳住基础对齐体系。
先统一盒模型，避免 padding/border 暗中破坏对齐
很多对齐偏移其实发生在小屏幕：一个设置了 width: 50%; padding: 16px 的按钮，在 375px 宽度下实际占宽远超一半，直接挤歪相邻元素。解决方法很简单：
- 全局加一行：* { box-sizing: border-box; } —— 让所有 padding 和 border 都算进 width/height 里
- 特别注意表单控件、卡片、导航项这类常带 padding 的元素，别等媒体查询里再补，一开始就写死 box-sizing: border-box
用 Flex 或 Grid 替代“手动对齐”，让对齐行为可继承
媒体查询里反复写 text-align: center 或 margin: 0 auto 很容易漏、难维护，还容易被子元素的 display 类型干扰。推荐用容器级对齐方案：
- 居中标题/按钮组：父容器设 display: flex; justify-content: center; align-items: center;
- 左右分栏（如头像+文字）：用 display: flex; gap: 12px;，不用 float 或 inline-block
- 网格式布局（如图标列表）：直接上 display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，天然响应
媒体查询中只做“微调”，不推翻基础对齐
对齐方式本身（比如居中、左对齐、两端对齐）尽量在默认样式里定死，媒体查询只负责适配尺寸变化带来的视觉微调：
立即学习“前端免费学习笔记（深入）”；
- 小屏文字多行时，把 justify-content: space-between 改成 flex-start 防止空隙过大
- 平板横屏下，把单列 flex 容器改成 flex-direction: row; flex-wrap: wrap; 并控制子项 flex: 1 1 200px
- 桌面端需要更紧凑间距？改 gap 值，而不是重写整个 justify-content
慎用绝对定位做对齐，尤其别在媒体查询里动态改 top/left
用 position: absolute 居中（比如 top: 50%; left: 50%; transform: translate(-50%, -50%)）看似精准，但一旦父容器高度随内容变化（如文字换行、图片加载延迟），就极易偏移。更稳妥的方式是：
- 用 display: flex + margin: auto 实现块级元素居中
- 用 place-items: center（Grid）或 place-content: center（Flex）一键居中
- 真要用绝对定位，确保父容器 position: relative 且高度可控（比如 min-height 设死）
基本上就这些。对齐偏移不是媒体查询写得不够多，而是基础布局没扎牢。先用 border-box 和 Flex/Grid 把根稳住，媒体查询才真正变成“锦上添花”而不是“亡羊补牢”。
