HTML CSS响应式设计中间4/0或2/2，但没有3/1

Question

我目前已经制作了这样的按钮（我已经取出了无用的东西来重现问题）：

CSS：

    .containerWelcome{
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .buttonsWelcome {
        width: 200px;
    }
    .disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

html：

        <div class="containerWelcome">
            <button name="button1" onclick="location.href=something0"
                    class="buttonsWelcome" type="submit"
                    value="something0">something0
            </button>
            <button name="button2" onclick="location.href=something"
                    class="buttonsWelcome" type="submit"
                    value="something">something
            </button>
            <button name="button3" onclick=""
                    class="buttonsWelcome disabled" type="submit"
                    value="somethingelse0">somethingelse0
            </button>
            <button name="button4" onclick=""
                    class="buttonsWelcome disabled" type="submit"
                    value="somethingelse1">somethingelse1
            </button>
        </div>

如果我不放大，我将彼此相邻四个按钮。这很好。 如果我放大一点，或者我在另一台较小的笔记本电脑上，我有3个按钮，一个按钮下面。这有点丑陋。 如果我的缩小甚至更多，那么我有2个按钮的两个按钮。这很好。除了它们不是完全集中的，这有点奇怪。我想那是因为它们在容器的左侧？

我的主要问题是：我想从中央容器顶部从4个按钮到2个按钮，而在中间容器的底部则2个，而没有笨拙的阶段，顶部有3个按钮中央容器的中心容器的一个。

我还正在寻找一种将按钮置于容器中心的方法，但我想这并不重要。

Answer 1

尝试此代码：

.containerWelcome{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:flex;
  
}
.buttonsWelcome {
  width: 200px;
}

@media only screen and (max-width: 600px)  {
  .containerWelcome{
     flex-wrap: wrap;
  }

  .buttonsWelcome {
    flex: 50%;
  }
}

Answer 2

最简单的方法是仅使用显示flex，不用担心，学习很容易学习，检查下面的解决方案并用它替换您的.containerwelcome样式。

.containerWelcome {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 410px;
  margin-inline: auto;
  gap: 5px;
}