应通过提升选择器特异性、作用域隔离和调试定位来解决CSS框架样式覆盖问题：优先使用更精准选择器（如ID或组合类）、父容器限定、属性选择器；其次采用CSS Modules、Shadow DOM或PostCSS自动加前缀；最后用DevTools查看生效规则及权重。
如何覆盖 CSS 框架的居中样式
直接写 !important 不是解法，而是掩盖问题的临时补丁。真正有效的覆盖，取决于你是否理解框架的样式优先级、选择器特异性（specificity）和加载顺序。
查清框架用了什么居中逻辑
不同框架默认用的居中方式差异很大，盲目覆盖容易失效或引发连锁错位：
-
Bootstrap 5的.text-center是text-align: center，只影响行内内容；.d-flex .justify-content-center .align-items-center才是 flex 居中 —— 覆盖时得对应改父容器的display或子项的margin -
Tailwind CSS的flex items-center justify-center是内联类组合，若你在 HTML 中写了class="flex items-center justify-center my-own-class"，那my-own-class的 CSS 规则必须比 Tailwind 的类有更高 specificity，否则无效 -
Ant Design的ant-modal-body默认用display: flex+align-items: center，但它的ant-modal外层还有position: fixed和top: 50%，只改 body 内部的 flex 属性可能没用
覆盖时优先用 specificity 而非 !important
多数框架样式表里用的是类选择器（如 .container、.btn），所以你的自定义规则只要加一层父级或用属性选择器就能压过它：
- 错误写法：
.my-btn { justify-content: flex-start !important; }—— 破坏可维护性，且可能被框架后续版本的更高权重规则干掉 - 正确写法：
body .my-btn { justify-content: flex-start; }或[data-custom="true"] .my-btn { justify-content: flex-start; }—— 特异性值从 0,1,0 升到 0,2,0 或 0,2,1，自然胜出 - 若框架用了
id选择器（如#header .nav），你就得用#header #custom-nav或内联 style，但这种情况极少
注意框架的 CSS 加载顺序和 scope
很多现代框架（如 Vue 的 scoped style、React 的 CSS Modules）会自动加哈希后缀或隔离作用域，导致你写的全局 CSS 根本不生效：
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件中加了
<style scoped>，那里面的.centered只作用于当前组件，不会影响框架组件；想覆盖外部框架组件，必须去掉scoped或用深度选择器（如:deep(.ant-btn)） - Next.js 或 Vite 项目中，如果框架 CSS 是通过
import引入的（如import 'antd/dist/reset.css'），它通常在你自己的 CSS 之前加载 —— 所以你的样式要写在它之后，或确保构建后顺序可控 - CDN 引入的框架（如 Bootstrap CDN），你的自定义 CSS 文件必须放在它后面加载，否则会被覆盖
最常被忽略的一点：框架的某些居中行为是 JS 动态注入的（比如 Modal 自动计算 top/left），这时候改 CSS 没用，得监听 DOM 变化或用框架提供的 API（如 Ant Design 的 getContainer 或 MUI 的 slotProps）。
