CSS：尝试将元素与大小不等的子元素垂直居中-PHP中文网问答

大家好，这是我目前拥有的图片

我有一个 3 行 3 列的网格（每列是最小内容）我将每个单元格中的元素居中。看起来不错，但如果我的标题变得很大，开关和类别之间的空间就会变得太大：

现在我尝试在 div 容器内制作中间行并使用 flex，但元素不会居中，因为一个类别的大小比另一个类别的大小大。

我还尝试使类别大小相同，但是当我将整个组件集中在页面上的某个位置时，由于较小类别的空白，它会过于靠右。

知道如何使该空间变得更小，但将开关保持在标题和按钮的正中间吗？

代码如下：

HTML：


  
    
    Disable
  
  
    
      
        
        
      
      
    
  
  Male
  Female
  gender

以及 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无关的内容。