CSS: Trying to vertically center an element with children of unequal sizes

Question

Hi everyone, this is the picture I currently have

I have a grid with 3 rows and 3 columns (each column is minimal content) I center the elements in each cell. Looks great, but if my title gets really big, the space between the switch and the category becomes too big:

Now I tried making a middle row inside a div container and using flex, but the elements won't be centered because the size of one category is larger than the other.

I also tried making the categories the same size, but when I centered the entire component somewhere on the page, it would be too far to the right due to the white space for the smaller category.

Any idea how to make that space smaller but keep the switch right in the middle of the title and button?

code show as below:

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>

and scss code:

.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;
    }
}

Tried to keep the code as small as possible and removed some stuff that has nothing to do with positioning scss.

Answer 1

I have written this before editing... Sorry if the class names are different. This is just a template.

 #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
        
        

    

Hope it helps you. Have a nice day.