# 居中布局 · Center

- 页面: https://jiguang132.com/zh/resources/astryx/docs/center
- 资源: Astryx (https://jiguang132.com/zh/resources/astryx.md)
- 全部指南: https://jiguang132.com/zh/resources/astryx/docs.md

居中布局用于布局场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。

## 安装与前置条件

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见[开始使用](/resources/astryx/docs/getting-started)。

## 示例与使用方式

- **居中布局 · 综合展示 1**：首先体验这个示例，再查看代码理解组件的组合方式。
- **居中布局 · 交互示例 2**：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
- **居中布局 · 交互示例 3**：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

## API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

## Center

Center aligns content to the middle of its container. Use it for empty states, loading screens, login forms, or any content that should sit in the center of the available space.

| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| axis | 'both' \| 'horizontal' \| 'vertical' | 'both' | 选择 Center 模式。横向书写时，horizontal 对应 flex 主轴/行内轴，vertical 对应交叉轴/块轴；纵向书写时，当前单轴行为仍跟随这些逻辑 flex 轴，而不是属性名暗示的物理轴。 |
| width | SizeValue |  | 容器宽度（px 或 CSS 值）。 |
| height | SizeValue |  | 容器高度（px 或 CSS 值）。 |
| maxWidth | SizeValue |  | Maximum container width (px or CSS value). |
| minHeight | SizeValue |  | Minimum container height (px or CSS value). |
| padding | 0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 |  | 所有方向的内边距，使用间距刻度（0、0.5、1、1.5、2、3、4、5、6、8、10）。与 Stack、Card、LayoutContent 和 LayoutPanel 的 padding 属性一致。在 JSX 中使用数字表达式 e.g. padding={3}。 |
| paddingInline | 0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 |  | 逻辑行内轴内边距，使用间距刻度。两者同时设置时在行内轴上覆盖 padding。 |
| paddingInlineStart | 0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 |  | 逻辑行内起始内边距，使用间距刻度。解析后的物理边取决于书写模式和方向。仅在该边上覆盖 paddingInline 和 padding。 |
| paddingInlineEnd | 0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 |  | 逻辑行内结束内边距，使用间距刻度。解析后的物理边取决于书写模式和方向。仅在该边上覆盖 paddingInline 和 padding。 |
| paddingBlock | 0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 |  | 逻辑块轴内边距，使用间距刻度。两者同时设置时在块轴上覆盖 padding。 |
| paddingBlockStart | 0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 |  | 逻辑块起始内边距，使用间距刻度。解析后的物理边取决于书写模式。仅在该边上覆盖 paddingBlock 和 padding。 |
| paddingBlockEnd | 0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 |  | 逻辑块结束内边距，使用间距刻度。解析后的物理边取决于书写模式。仅在该边上覆盖 paddingBlock 和 padding。 |
| isInline | boolean | false | 使用 inline-flex（适用于文本/图标）。 |
| children | ReactNode |  | 要居中的内容。 |
| xstyle | StyleXStyles |  | 用于布局自定义的 StyleX 样式（外边距、定位、尺寸）。必须是 stylex.create() 的值，不能是 style={{}} 这样的内联样式对象。 |

### 使用建议

- Use a single-axis value only in horizontal writing, or after verifying the active writing mode. In vertical writing, the current implementation follows flex main/cross axes rather than the physical prop names.
- In horizontal writing, give Center height when using axis="vertical"; centering needs available space on the selected flex axis.
- Use isInline to center small elements like icons or badges within a line of text without breaking the text flow.
- Keep semantic structure and accessible names on the content. Center is a layout-only container and does not add a role or label.
- 避免：Wrap large page sections in Center. Use Layout or AppShell for page-level structure.
- 避免：Use Center for horizontal lists of items. Use Stack with hAlign="center" instead.

### 主题 API

```json
{
  "targets": [
    {
      "className": "astryx-center",
      "visualProps": [
        "axis"
      ]
    }
  ]
}
```

### 组件结构

- **Container**: A flexbox wrapper that aligns its children to the center along the chosen axis.
- **Content**: Any children passed to Center. Typically a card, form, spinner, or empty state message.


## 完整示例的额外依赖

部分示例使用独立图标包。示例清单中的每条安装命令包含该示例实际需要的依赖；若要运行本页全部示例，还需安装：

```bash
npm install @heroicons/react@2.2.0
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt