sku选择器用inline-block时，父容器必须设font-size: 0消除空白间隙，再给子项显式恢复font-size；否则text-align: center会因间隙导致视觉右偏；现代项目更推荐flex布局，天然无间隙、对齐可控。
SKU选择器用inline-block时，父容器必须清空字体大小
行内块元素之间默认有空白间隙，是因为浏览器把换行符和空格解析为一个空格字符，而这个空格的宽度受font-size影响。不设font-size: 0，哪怕你写了text-align: center，整个选择器组也会整体右偏——看起来像没居中。
正确做法是给父容器（比如.sku-selector）加font-size: 0，再给每个子项（如.sku-option）单独恢复字体大小：
.sku-selector {
text-align: center;
font-size: 0; /* 关键：消除间隙 */
}
.sku-option {
display: inline-block;
font-size: 14px; /* 恢复可读字号 */
}
- 别只靠
text-align: center就想让一堆inline-block居中，间隙会吃掉视觉对称性 - 如果子项用了
vertical-align: top但高度不一致，仍可能造成底部不对齐，建议统一设height或line-height - 现代项目更推荐改用
display: flex替代inline-block，天然无间隙、对齐可控
Flex布局下，SKU选项加float或position: absolute会失效
一旦在flex容器里给某个SKU按钮加了float: left或position: absolute，它就脱离了flex流，justify-content: center对它完全不起作用——那个按钮会卡在左上角，其他选项照常居中，整体错位。
检查控制台是否出现“display: flex has no effect on absolutely positioned children”这类提示，就是这个原因。
- flex容器内所有子元素必须保持文档流参与态，禁用
float和position: absolute - 若需悬浮效果（如悬停高亮边框），用
transform: scale()或outline替代定位类操作 - 绝对定位只适合模态层、气泡提示等真正需要脱离流的场景，不是用来“微调位置”的
响应式断点里，max-width和margin: 0 auto要同步重设
PC端SKU选择器宽600px、居中正常，切到手机后如果只改了width: 100%但没重置margin，它会贴左；或者忘了删掉PC端写的min-width: 600px，导致横滚或溢出。
关键不是“怎么写居中”，而是“在哪个断点下维持居中逻辑有效”：
@media (max-width: 768px) {
.sku-selector {
width: 100%;
max-width: none; /* 清除PC端max-width残留 */
margin: 0 auto; /* 重申，避免被继承覆盖 */
}
.sku-option {
flex: 1; /* 若已转flex，用flex均分 */
}
}
- 不要依赖单一媒体查询“覆盖全部”，每个断点都应显式声明
width、margin、display -
max-width值在小屏下容易和padding冲突，建议用box-sizing: border-box保底 - 真要兼容老浏览器（IE11），
inline-block方案比flex更稳，但必须严格处理font-size: 0
按钮文字居中 ≠ 按钮本身居中
给SKU按钮加text-align: center，只是居中了按钮里的文字；如果按钮是inline或inline-block，它自己还在左对齐流里。用户点“M”和点“XL”感觉位置不一致，就是因为按钮块没居中。
让按钮自己居中，有两个可靠路径：
- 路径一：按钮设
display: block+width: fit-content+margin: 0 auto（兼容性好，IE11支持） - 路径二：父容器设
display: flex+justify-content: center，按钮保持display: inline-block或block即可
注意fit-content在Safari旧版本里可能需加-webkit-前缀，生产环境建议用max-content或固定宽度兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
