AbsoluteCenter 绝对居中 - Docs - Artefact

AbsoluteCenter 绝对居中

Layout

展示型

简介

用于在其父容器内居中内容的工具组件。

用法

Centered Content

import { AbsoluteCenter } from "../components/ui";

export default function MyPage() {
  return (
    <div
      style={{
        position: "relative",
        height: "200px",
        width: "200px",
        border: "1px solid black",
      }}
    >
      <AbsoluteCenter axis="both">Centered Content</AbsoluteCenter>
    </div>
  );
}

CMS 页面构建器

该组件在页面构建器 (content/pages/*.json) 中作为 absoluteCenter 区块提供：

{
  "type": "absoluteCenter",
  "axis": "both",
  "children": [
    { "type": "badge", "text": "Centered Badge", "colorPalette": "purple", "variant": "solid" }
  ]
}

属性

属性	类型	说明
`children`	`any`	组件内部渲染的内容。
`class`	`string`	自定义 CSS 类。