CSSを使用してモーダルを垂直に中央揃えする方法

1. Flexboxを使用する方法: Flexboxは、要素をコンテナ内で柔軟に配置するためのCSSの機能です。以下のステップに従って、モーダルを垂直に中央揃えすることができます。

   Step 1: モーダルのコンテナ要素に以下のCSSを追加します。

   .modal-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
   }

   Step 2: モーダルの内容を包む要素に以下のCSSを追加します。

   .modal-content {
    margin: auto;
   }

   これにより、モーダルが垂直方向に中央揃えされます。

2. Gridを使用する方法: Gridは、要素をグリッド状に配置するためのCSSの機能です。以下の手順に従って、モーダルを垂直に中央揃えすることができます。

   Step 1: モーダルのコンテナ要素に以下のCSSを追加します。

   .modal-container {
    display: grid;
    place-items: center;
    min-height: 100vh;
   }

   Step 2: モーダルの内容を包む要素に以下のCSSを追加します。

   .modal-content {
    justify-self: center;
    align-self: center;
   }

   これにより、モーダルが垂直方向に中央揃えされます。

これらの方法を使用することで、モーダルを垂直に中央揃えすることができます。また、レスポンシブデザインにも対応しています。適切なCSSクラス名を使用して、モーダルのコンテナと内容を指定してください。