CSS变量本身不居中，需驱动display、justify-content或transform等属性；:is()可配合变量切换flex/grid模式，但Safari 16.4前需data-属性辅助，calc()中用带单位变量做偏移居中更可靠。
--center-mode 这个变量本身不会居中，CSS变量只是占位符；真正起作用的是你用它驱动的 display、justify-content 或 transform 等声明。动态居中 ≠ 变量一设就自动生效，而是靠变量参与计算或条件切换来改变布局行为。
用 :is() + var(--center-mode) 切换 flex / grid 模式
现代浏览器（Chrome 109+、Firefox 110+、Safari 16.4+）支持用 :is() 配合自定义属性做“伪条件渲染”。比如：
.container {
--center-mode: flex;
display: var(--center-mode);
justify-content: center;
align-items: center;
}
<p>.container[data-center="grid"] {
--center-mode: grid;
place-items: center;
}
注意：display: var(--center-mode) 在 Safari 16.4 之前不生效，必须配合 data- 属性手动切换。实际更稳的做法是：
- 不直接用
var(--center-mode)控制display，改用它控制类名开关（JS 注入）或媒体查询边界值 - 若坚持纯 CSS，优先用
[data-center="flex"]和[data-center="grid"]分别写死规则，变量只用于颜色、间距等无布局影响的属性
calc() 中调用 var(--offset) 做偏移型居中
当你需要“居中但带可控偏移”，比如模态框微调、tooltip 锚点对齐，可以用变量参与 transform: translate() 计算：
立即学习“前端免费学习笔记（深入）”；
.modal {
position: absolute;
top: 50%;
left: 50%;
--offset-x: 0;
--offset-y: -12px;
transform: translate(calc(-50% + var(--offset-x)), calc(-50% + var(--offset-y)));
}
这个技巧在动画或主题切换时特别有用，比如暗色模式下 tooltip 往上多抬一点：
- 变量必须有单位（
px、rem），不能是纯数字 -
calc()里加减乘除运算符前后必须有空格，否则解析失败 - IE 完全不支持
var()在calc()中使用，如需兼容请降级为 JS 动态写style.transform
用 @property 让 var(--scale) 驱动 transform 动画居中
如果目标是“从左上角飞入并停在正中心”，且希望用变量控制入场距离或速度，得先注册可动画的自定义属性：
@property --fly-distance {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
<p>.fly-in {
--fly-distance: 100px;
transform: translate(
calc(-50% + var(--fly-distance)),
calc(-50% - var(--fly-distance))
);
transition: transform 0.3s ease-out;
}
关键点：
-
@property是 CSS Houdini 特性，仅 Chromium 系（Edge 105+、Chrome 108+）和 Safari 16.4+ 支持，Firefox 仍不支持 - 没注册
@property就直接在transition里用var()，动画会跳变而非平滑过渡 - 这种方案适合“视觉动效居中”，不是结构化居中；真要响应式居中，请回到
flex或grid
最易被忽略的一点：CSS 变量无法触发重排（reflow），所以它不能替代 display 切换或 position 类型变更。想靠 --center: true 一键开启居中？不行。变量只是数据管道，背后还得有真实生效的布局规则兜底。
