CSS：嘗試將元素與大小不等的子元素垂直居中

Question

大家好，這是我目前擁有的圖片

我有一個 3 行 3 列的網格（每列是最小內容） 我將每個單元格中的元素居中。 看起來不錯，但如果我的標題變得很大，開關和類別之間的空間就會變得太大：

現在我嘗試在 div 容器內製作中間行並使用 flex，但元素不會居中，因為一個類別的大小比另一個類別的大小大。

我還嘗試使類別大小相同，但是當我將整個元件集中在頁面上的某個位置時，由於較小類別的空白，它會過於靠右。

知道如何使該空間變得更小，但將開關保持在標題和按鈕的正中間嗎？

程式碼如下：

HTML：

<div class="category-switch">
  <div class="form-check category-switch__btn">
    <input class="form-check-input" type="checkbox" />
    <label class="form-check-label form-label">Disable</label>
  </div>
  <div class="category-switch__switch">
    <div class="switch">
      <div class="form-check">
        <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">Male</span>
  <span class="category-switch__category category-switch__category--2">Female</span>
  <span class="category-switch__title">gender</span>
</div>

以及 scss 程式碼：

.category-switch {
    // The grid to place the items
    display: grid;
    grid-template-columns: repeat(3, min-content);
    grid-template-rows: repeat(3, min-content);
    gap: 0.8rem;
    place-items: center;
    justify-items: center;
    // Makes the component be the width of its content
    width: max-content;

    // Title
    &__title {
        grid-row: 1/2;
        grid-column: 2/3;
        font-weight: bold;
        text-transform: capitalize;
    }

    // Placing category text
    &__category {
        &--1 {
            grid-row: 2/3;
            grid-column: 1/2;
        }

        &--2 {
            grid-row: 2/3;
            grid-column: 3/4;
        }
    }

    // The switch position
    &__switch {
        grid-row: 2/3;
        grid-column: 2/3;
    }

    // The button css
    &__btn {
        grid-row: 3/4;
        grid-column: 2/3;
        display: grid;
        place-items: center;
        position: relative;
        width: 7rem;
        height: 2.8rem;
        background: #d02b2b;
        border-radius: 0.5rem;
    }
}

嘗試使程式碼盡可能少，並刪除了一些與定位scss無關的內容。

Answer 1

在編輯之前我已經寫了這個... 如果類別名稱不同，很抱歉。 這只是一個模板。

 #mainContainer{
            display:grid;
            grid-template-columns: 100px fit-content(10%) 100px;
            column-gap: 20px;
            grid-row-gap: 20px;
            /* adjust your template here */
        }
        #mainContainer div{
            display:grid;
            align-content: center;
            justify-content: center;
            border:1px solid #000000;
        }
        .top{
            font-size:1.6em;
            font-weight: bold;
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 1;
        }
        .left{
            font-size:1.6em;
            font-weight: bold;
        }
        .right{
            font-size:1.6em;
            font-weight: bold;
        }
        .bottom{
            background-color: orangered;
            border-radius: 10px;
            height:30px;
        }

 

        

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

            male
        
        

            
        
        

            female
        
        

        

            Disable
        
        

    

希望對你有幫助。 祝你有美好的一天。