CSS变量不能直接用于justify-content或align-items等接受关键字的属性，但可用于transform偏移、justify-self/align-self（Grid/Flex子项）、尺寸颜色等数值型属性，布局行为需通过class或媒体查询控制。
用 CSS 变量控制居中时，justify-content 和 align-items 不能直接绑定变量
CSS 自定义属性（即 CSS 变量）本身不能直接用于控制 justify-content 或 align-items 的值——因为这些属性不接受 var() 插入的字符串作为有效关键字。比如写 justify-content: var(--align-h, center); 会失效，浏览器报“invalid value”。
真正能用变量的地方是：数值型属性（如 margin、transform、top）、颜色、尺寸、过渡时长等。居中逻辑得靠它们间接实现。
- 想动态切换居中方式？用
class切换预设规则，变量只管“参数”，不管“行为” - 想根据屏幕尺寸或主题调整偏移量？
transform: translate(var(--tx, -50%), var(--ty, -50%));是可行的 - 想让 flex 容器在不同场景下“有时居中、有时左对齐”？必须用媒体查询或 JS 切换 class，不能靠变量驱动
justify-content
transform: translate() 配合 CSS 变量做可控偏移居中
这是最实用的变量介入方案：父容器绝对定位，子元素用 top: 50%; left: 50% 定位到中心点，再用 transform 偏移自身宽高的百分比——而这个偏移量可以由变量控制。
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(
var(--dx, -50%),
var(--dy, -50%)
);
}
这样你就能通过 JS 或 :root 修改变量来微调位置：
:root {
--dx: -48%;
--dy: -52%;
}
- 变量值必须是合法的
transform函数参数，比如-50%、0、10px，不能是"center"这类字符串 - 如果子元素尺寸未知，
%偏移仍基于自身宽高，安全；但若用px，就得确保变量值匹配实际尺寸 - IE 不支持
var()在transform中（IE11 有兼容问题），需 fallback 或避免在老环境使用
Flex 容器里用变量控制“是否启用居中”
虽然不能把 justify-content 设为变量，但可以用变量配合 class 控制开关：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
:root {
--flex-center-enabled: 1;
}
<p>.parent {
display: flex;
}</p><p>.parent[data-center="true"] {
justify-content: center;
align-items: center;
}</p><p>/<em> 或更灵活：用属性选择器 + 变量计算 </em>/
.parent.center-on-mobile {
justify-content: var(--jc, center);
}</p>
注意：var(--jc, center) 在这里仍然无效——justify-content 不认字符串变量。所以真实做法是：
- JS 动态添加/移除
class（如.is-centered），对应预设样式 - 用
@media查询配合prefers-reduced-motion等条件，变量只控制动画强度或偏移幅度，不控制布局模式 - 如果真要“变量驱动布局”，得用 CSS
@layer+ 条件规则（CSS Nesting + @when 尚未广泛支持，慎用）
Grid 中 place-items 同样不接受变量值，但 grid-template 可以
place-items: var(--place, center); 会失败。但你可以用变量控制网格轨道大小，间接影响内容落点：
.grid {
display: grid;
grid-template-columns: 1fr var(--gap, 20px) 1fr;
place-items: center;
}
或者用变量控制 justify-self/align-self（这两个属性支持 var()）：
.item {
justify-self: var(--self-x, center);
align-self: var(--self-y, center);
}
-
justify-self和align-self允许字符串变量，且现代浏览器（Chrome 89+, Firefox 73+, Safari 14.1+）已稳定支持 - 变量值必须是规范关键字：
start、end、center、stretch，不能是自定义字符串 - 注意：父容器必须是 Grid 或 Flex 容器，否则
justify-self无效
真正需要变量参与居中逻辑时，别试图“绕过 CSS 属性限制”，而是把变量当作可配置的偏移量、尺寸、开关状态来用。布局行为本身仍靠 class 或媒体查询控制——这是目前最可靠、最易调试的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
