html css responsive design several buttons middle 4/0 or 2/2 but no 3/1-CodePudding

I currently have made my buttons like so (I've taken off the useless stuff to reproduce the problem):

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 >
            <button name="button1" onclick="location.href=something0"
                     type="submit"
                    value="something0">something0
            </button>
            <button name="button2" onclick="location.href=something"
                     type="submit"
                    value="something">something
            </button>
            <button name="button3" onclick=""
                     type="submit"
                    value="somethingelse0">somethingelse0
            </button>
            <button name="button4" onclick=""
                     type="submit"
                    value="somethingelse1">somethingelse1
            </button>
        </div>

And if I don't zoom in, I have the four buttons next to each other. Which is good. If I zoom in a little bit or if I'm on another smaller laptop I have 3 buttons and one below them. Which is sort of ugly. If I zoom even more, I have 2 buttons on top of 2 others one. Which is good. Except, they're not perfectly centered, which is a bit weird. I guess that's because they're at the left of the container?

My main issue is: I would like to go from 4 buttons to 2 on top of the center container and 2 at the bottom of the center container WITHOUT having the awkard stage where there are 3 buttons on top of the center container and one at the botton of the center container.

I also am looking for a way to center the buttons in the center of the container, but that's less important I guess.

CodePudding user response：

the easiest way is to just use display flex, don't worry it's to simple to learn, check the solution below and replace your .containerWelcome style with it.

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

CodePudding user response：

try this code:

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