CSSで垂直および水平方向に要素を中央に配置する方法

垂直方向の中央配置:

1. フレックスボックスを使用する方法:

   .container {
    display: flex;
    justify-content: center;
    align-items: center;
   }

2. 行の高さを指定する方法:

   .container {
    height: 100vh; /* 高さを画面の高さに指定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; /* テキストの中央配置 */
   }
   .content {
    margin-top: auto;
    margin-bottom: auto;
   }

水平方向の中央配置:

1. テキストの中央配置:

   .container {
    text-align: center;
   }

2. ブロック要素の中央配置:

   .container {
    display: flex;
    justify-content: center;
   }

これらの方法を使用して、要素を垂直および水平方向に中央に配置することができます。適切な方法を選択し、デザインに合わせて適用してください。