cssのdisplay:flexで中身を上下中央表示

CSSのdisplay: flexを使用して、要素の中身を上下中央に表示するためのコード。

CSSコード

.container {
  display: flex;               /* フレックスボックスを有効にする */
  justify-content: center;     /* 水平方向の中央揃え */
  align-items: center;         /* 垂直方向の中央揃え */
  height: 100vh;              /* コンテナの高さを画面全体に設定 */
}

この方法を使うことで、簡単に要素の中身を上下中央に配置することができます。
フレックスボックスは、レイアウトを柔軟に調整するための強力なツールですので、ぜひ活用してみてください。