KDDI Engineer&Designer Advent Calendar 2021の25日目の記事です。最終日なのに小粒なネタを投稿します。

今までMaterialUI(MUI)を使っていたのですが最近ReactでChakraUIを始めてみました。
レイアウトを組む方法が様々な方法があるため、「縦方向＆横方向で真ん中寄せ」をいろんな方法で書いてみました。
何故真ん中に寄るのか説明しながらそれぞれのコンポーネントの特徴を説明していきたいと思います。
真ん中寄せ生活の参考にしてもらえると幸いです。

真ん中に置くコンポーネント

以下のコンポーネントを真ん中に置く想定で説明していきます。

const RectBox :React.FC = () => (
  <Box bg='gray.500' boxSize={100} />
)

以下の例1~6すべてにおいて、以下が表示されます。

例１.Boxで

<Box h={200} display='flex' justifyContent='center' alignItems='center' bg='gray.100'>
   <RectBox />
</Box>

Boxにhを指定することで高さを指定しています。
あんまりChakraUIっぽい書き方じゃないです。MaterialUIを使っていたときはこうやって書いていました。
display='flex'がついている状態でjustifyContent='center'をつけると縦方向に真ん中寄せalignItems='center'をつけると横方向に真ん中寄せします。

参考：

例2.Centerで真ん中寄せ

<Box h={200} bg='gray.100'>
   <Center h='100%'>
     <RectBox />
   </Center>
</Box>

この例では、<Center>を使って真ん中寄せができます。alignもjustifyも指定不要です。ただし、h='100%'をつけないと高さがないため上に張り付いてしまいます。高さを明示的に書く必要があります。

参考：

3.Flexで真ん中寄せ

<Flex h={200} justify='center' align='center' bg='gray.100' >
  <RectBox />
</Flex>

Flexを使っていますが、例１とやっていることは近いかもしれません。
justifyでjustifyContentと同じ、alignでalignItemsと同じ意味になります。
Boxではjustifyとalignは省略の意味で使えないので要注意です。

参考：

4.Flex & Spacerで長さ調整

<Flex h={200} align='center' bg='gray.100' >
   <Spacer />
   <RectBox />
   <Spacer />
</Flex>

Spacerをいれることで両端を調整します。縦方向はalign='center'で調整してます

参考：

5.HStack

<HStack h={200} justify='center' bg='gray.100'>
   　<RectBox />
</HStack>

HStackを使うと水平方向(Horizontal)、つまり横方向に積み上げることができます。
（敢えてHStackを持ってきましたが、今回のように１個だけ置くなら使わないでしょう）

6.VStack

<VStack h={200} justify='center' bg='gray.100'>
    <RectBox />
</VStack>

VStackを使うと垂直方向(Vertical)、つなり縦方向に積み上げることができます。Flexの時は、水平方向に積むためalign='center'で縦方向が中央になりましたが、VStackは垂直方向に積むためjustify='center'にする必要があります。

（敢えてHStackを持ってきましたが、今回のように１個だけ置くなら使わないでしょう）

参考：

あれ？真ん中に寄らないな？と思ったら

justifyとalign逆になってないか確認しましょう justifyは主軸方向、alignは交差軸方向
heightを書かないと高さ方向は寄せてくれない

ChakraUIのいろんな方法で真ん中寄せする