CSS: サイズが等しくない子を持つ要素を垂直方向の中央に配置しようとしています

Question

皆さん、こんにちは。これが私が今持っている写真です

3 行 3 列のグリッドがあります (各列は最小限のコンテンツです) 各セルの要素を中央に配置します。 見た目は素晴らしいですが、タイトルが非常に大きくなると、スイッチとカテゴリの間のスペースが大きくなりすぎます:

ここで、div コンテナ内に中央の行を作成し、flex を使用しようとしましたが、一方のカテゴリのサイズが他方のカテゴリよりも大きいため、要素は中央に配置されません。

また、カテゴリを同じサイズにしようとしましたが、コンポーネント全体をページ上のどこか中央に配置すると、小さいカテゴリの空白のせいで右に寄りすぎてしまいます。

そのスペースを小さくしながら、スイッチをタイトルとボタンの真ん中に置く方法はありますか?

コードは以下のように表示されます:

HTML：

<div class="カテゴリスイッチ">
  <div class="フォームチェックカテゴリ-switch__btn">
    <input class="form-check-input" type="checkbox" />
    <label class="form-check-label form-label">無効にする</label>
  </div>
  <div class="category-switch__switch">
    <div class="スイッチ">
      <div class="フォームチェック">
        <input class="form-check-input" type="checkbox" />
        <label class="form-check-label form-label"></label>
      </div>
      <span class="switch__slider switch__round"></span>
    </div>
  </div>
  <span class="category-switch__category category-switch__category--1">男性</span>
  <span class="category-switch__category category-switch__category--2">女性</span>
  <span class="category-switch__title">性別</span>
</div>

および scss コード:

.カテゴリスイッチ {
    // アイテムを配置するグリッド
    表示: グリッド;
    グリッド テンプレート列:repeat(3, min-content);
    グリッドテンプレート行:repeat(3, min-content);
    ギャップ: 0.8rem;
    アイテムを配置: 中央;
    項目を揃える: 中央;
    // コンポーネントをそのコンテンツの幅にします
    幅: 最大コンテンツ;

    // タイトル
    ＆__タイトル {
        グリッド行: 1/2;
        グリッド列: 2/3;
        フォントの太さ: 太字;
        テキスト変換: 大文字化;
    }

    // カテゴリテキストを配置
    ＆__カテゴリー {
        &--1 {
            グリッド行: 2/3;
            グリッド列: 1/2;
        }

        &--2 {
            グリッド行: 2/3;
            グリッド列: 3/4;
        }
    }

    // スイッチの位置
    &__スイッチ{
        グリッド行: 2/3;
        グリッド列: 2/3;
    }

    //ボタンのCSS
    &__btn {
        グリッド行: 3/4;
        グリッド列: 2/3;
        表示: グリッド;
        アイテムを配置: 中央;
        位置: 相対的;
        幅: 7レム;
        高さ: 2.8レム;
        背景: #d02b2b;
        境界半径: 0.5rem;
    }
}

コードをできるだけ小さくし、scss の配置に関係のないものをいくつか削除しました。

Answer 1

これは編集前に書いたものです... クラス名が違っていたらごめんなさい。 これは単なるテンプレートです。

 #メインコンテナ{
            表示:グリッド;
            グリッド テンプレート列: 100px フィットコンテンツ(10%) 100px;
            列ギャップ: 20px;
            グリッド行ギャップ: 20px;
            /* ここでテンプレートを調整します */
        }
        #mainContainer div{
            表示:グリッド;
            コンテンツの配置: 中央;
            コンテンツの位置揃え: 中央;
            ボーダー:1px ソリッド #000000;
        }
        。上{
            フォントサイズ:1.6em;
            フォントの太さ: 太字;
            グリッド列開始: 1;
            グリッド列の終了: 4;
            グリッド行開始: 1;
            グリッド行の終了: 1;
        }
        。左{
            フォントサイズ:1.6em;
            フォントの太さ: 太字;
        }
        。右{
            フォントサイズ:1.6em;
            フォントの太さ: 太字;
        }
        。底{
            背景色: オレンジレッド;
            境界半径: 10px;
            高さ:30ピクセル;
        }

 

        

            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet、consectetur、adipisci velit
        
        

            男
        
        

            
        
        

            女性
        
        

        

            無効にする
        
        

    

お役に立てば幸いです。 良い１日を。