Aligning buttons in center of background - html

Question

I'm new to CSS etc.
I'm trying to align 2 buttons next to each other, in center of the background image, so it stays in position even when the window is being resized.
Image for illustration:
Code:
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
<div class="container">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>

Answer 1

So, maybe you could try:
.container{
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
Or have you seen anything about flexbox? Since you want it to be responsive, I think it might be the best altenative.
.container {
display: flex;
align-items: center;
justify-content: space-around;
}

Answer 2

Why you creating two classes with same properties? first you can remove properties from classes: button1 and button2 and then add these properties to button class like this:
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
/* properties from class button1 or button2 */
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
And in button1 and button2 class add codes below to center these:
.button1 {
transform: translate(-50%, -50%);
position: absolute;
left: 40%;
top: 50%;
}
.button2 {
transform: translate(-50%, -50%);
position: absolute;
left: 60%;
top: 50%;
}
Don't change HTML code, classes are same.

Answer 3

Add this CSS code and change the top and left values as you need;
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
Edit HTML Code look like this;
<div class="btncenter">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
Below Final code sample you can view;
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
<div class="container">
<div class="btncenter">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
</div>

Answer 4

I prefer to use #media queries per-width of the screen.
With position : absolute; and just play the top or left value as you need :D

Answer 5

There are multiple ways to do it. The code below will keep the buttons separated from each other until there is no space left. This should give you a start.
You can also use position: fixed if you need a more fixed solution. But I will recommend playing with flex property. It should solve most of the use-cases.
.btn-container {
display: flex;
align-items: center;
justify-content: space-around;
}
button {
background: pink;
color: #fff;
padding: 20px 40px;
}
<div class="btn-container"> <button class="first">Button 1</button><button class="second">Button 1</button></div>