Taliwindで要素を真ん中寄せ

要素を真ん中に寄せたい時、下記のコードで実現できます。

①要素をflexに設定
②縦軸と横軸を中心に設定(items-center justify-center)
③flexの高さの最小を画面の高さに設定(min-h-screen)

  return (
    <div className = "flex items-center justify-center bg-gray-700  min-h-screen ">
      <Card >
        <CardContent>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
        </CardContent>
      </Card>
      <Card >
        <CardContent>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
        </CardContent>
      </Card>
      <Card >
        <CardContent>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
        </CardContent>
      </Card>
      <Card >
        <CardContent>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
        </CardContent>
      </Card>
    </div>
  );