Center

いつ使うか

• コンテンツを水平・垂直の両方向で中央に配置したいとき
• ローディング状態や空状態の表示を画面中央に配置するとき

いつ使わないか

• 水平方向のみのセンタリングには mx-auto や text-center を使う
• 複数要素のレイアウトには Stack / HStack を使う

Usage

import { Center } from '@bi-shop-it/ui/center';

<Center>
  <p>中央に配置されるコンテンツ</p>
</Center>;

Props

状態

基本

高さのあるボックス内でテキストが中央に配置される。

<div className="grid h-40">
  <Center>
    <p>中央に配置されたテキスト</p>
  </Center>
</div>

アクセシビリティ

コンポーネントが内部で処理すること

• レイアウト専用のコンポーネントであり、セマンティクスは付与しない（div を使用する）

利用者が対応すること

• セマンティクスが必要な場合は Center を適切なセマンティック要素で囲むこと

関連コンポーネント

• Stack / HStack — 垂直・水平方向のレイアウト
• Container — 最大幅制約のあるコンテナ