centering vertically and horizontally several buttons css

April 20, 2022

I wanted to center both vertically and horizontally my buttons so I got inspired by this tutorial. However, I think, because of position: fixed; my three buttons are on top of each other, and I would like them to be next to each other (but still centered horizontally). I sort of guess why this wouldn’t work (because I place them all at the same place) but don’t really know how to fix this. Adding display: inline; didn’t help.

I also saw this stackoverflow post so I tried a second .css but this still didn’t work (this time the buttons were on the top left, but not on top of each other).

My HTML code is the following:

<body>
    <button name="button1" class="buttonsWelcome" type="submit" value="HaploSFHI">1</button>
    <button name="button2" class="buttonsWelcome" type="submit" value="tool2">2</button>
    <button name="button3" class="buttonsWelcome" type="submit" value="tool3">3</button>
</body>

and my first css:

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

and my second css:

.buttonsWelcome {
    width: 200px;
    vertical-align: middle;
    text-align:center;
    display: inline-block;
}

>Solution :

Just try this!

.container{   
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.buttonsWelcome {
    width: 50px;
}

<div class="container">
    <button name="button1" class="buttonsWelcome" type="submit" value="HaploSFHI">1</button>
    <button name="button2" class="buttonsWelcome" type="submit" value="tool2">2</button>
    <button name="button3" class="buttonsWelcome" type="submit" value="tool3">3</button>
</div>

If you want you can also change the .container to body in CSS and remove the above div in HTML code but it is good to use a separate block to add them otherwise all of your code will be centered when you use it with your body tag.

Moreover, there are a lot of ways to do this and this is only a one method of them. Look at this W3School CSS Layout page if you want to know more about how to align items to center

Thanks and best regards!