AbsoluteCenter 绝对居中
Layout
展示型
简介
一个工具型容器组件，可在其最近的相对定位父容器内绝对居中其子元素。非常适合叠加内容、加载骨架、居中的徽标、标注卡片以及落地页横幅高亮。
AbsoluteCenter 组件已作为 absoluteCenter 区块完全集成进页面构建器，让内容作者与开发者能够直接在 CMS 中轻松配置视觉布局、对齐轴与间距行为。
用法
以下示例展示了内容编辑者如何绑定并构建居中对齐的绝对容器。
1. 双轴居中
在父级上下文中完美地水平与垂直居中嵌套元素。非常适合居中固定的行动号召徽标或进度加载浮层。
{
"type": "absoluteCenter",
"axis": "both",
"children": [
{
"type": "badge",
"text": "Centered Content",
"colorPalette": "purple",
"variant": "solid"
}
]
}
Centered Content
2. 仅水平对齐
将元素固定为水平居中（沿 X 轴），同时保持垂直位置不变。
{
"type": "absoluteCenter",
"axis": "horizontal",
"children": [
{
"type": "badge",
"text": "Horizontal Only",
"colorPalette": "blue",
"variant": "outline"
}
]
}
Horizontal Only
3. 仅垂直对齐
将元素固定为垂直居中（沿 Y 轴），同时保持水平位置不变。
{
"type": "absoluteCenter",
"axis": "vertical",
"children": [
{
"type": "badge",
"text": "Vertical Only",
"colorPalette": "green",
"variant": "subtle"
}
]
}
Vertical Only
属性
| 属性 | CMS 字段类型 | 默认值 | 说明 / 可选值 |
|---|---|---|---|
对齐轴 (axis) | select | "both" | 应用居中计算的布局坐标轴。 • 可选值： "both"、"horizontal"、"vertical"。 |
子内容 (children) | list | - | 在绝对上下文中需要居中对齐的嵌套组件区块集合。 |
自定义类 (class) | string | - | 直接应用于绝对容器的自定义 CSS 类覆盖。 |
开发者说明与无障碍
- 相对父级目标： 要让 AbsoluteCenter 正常工作，其直接父容器或布局包装器必须具有
position: relative（或其他非 static 的定位）。 - 硬件加速定位： 在底层，该组件使用高效 CSS 位移规则（
transform: translate(-50%, -50%)）防止在不同屏幕像素密度下出现亚像素渲染模糊或字体缩放问题。 - 可访问的树排序： 该组件保持屏幕阅读器的原生 DOM 顺序读取顺序。它不会改变内部子内容的键盘导航标签页或无障碍轮廓高亮。