【Chakura UI】ボタンを中央に配置する

はじめに

ボタンを中央に配置する方法についてメモしておきます。
UIはChakura UIを使用しています。

サンプル

tsx

        <Box display="flex" alignItems="center" justifyContent="center">
          <Button
            type="submit"
            colorScheme="green"
            variant="outline"
          >
            ボタン
          </Button>
        </Box>

おわりに

display="flex"
これだけだとデフォルトで水平方向に横並びのレイアウトになります。
従って、具体的な配置（中央揃え、スペースの均等割り、折り返しなど）は指定できません。
justifyContentとalignItemsを使用してボタンの位置を調整します。

justifyContent
フレックスアイテムを主軸（通常は水平方向）に沿ってどう配置するかを指定します。

・flex-start: 左揃え（デフォルト）
・flex-end: 右揃え
・center: 中央揃え
・space-between: フレックスアイテム間に均等なスペースを配置し、両端はコンテナの端に揃える
・space-around: フレックスアイテム間に均等なスペースを配置し、両端に半分のスペースを配置
・space-evenly: フレックスアイテム間に均等なスペースを配置

alignItems
フレックスアイテムを交差軸（通常は垂直方向）に沿ってどう配置するかを指定します。

・flex-start: 上揃え
・flex-end: 下揃え
・center: 中央揃え
・baseline: テキストのベースラインに揃える
・stretch: 高さを揃えて伸縮させる（デフォルト）

参考