centering multiple absolute divs - html

Question

I have a questions about centering multiple absolute div horizontally. I have a parent div that i s relative that contain four child divs. I want them to center evenly. Is there a way to center the four divs then add once? Or must I position them one by one? What I have now is when I position the divs absolute. They stack on top of each other, when they are centered.
Thank you for your time.

Answer 1

You can define a div for your sub divs and use display: flex.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
boxes {
margin-top: 25px;
width: 100%;
position: relative;
text-align: center;
}
.eq {
display: flex;
}
.box {
width: 300px;
max-height: 400px;
min-height: 233px;
padding: 15px;
border: 1px solid #e6e6e6;
overflow-wrap: break-word;
background-color: #fff;
margin-right: 20px;
;
}
<div class="boxes">
<div class="box">
<h3>MyBMW Login</h3>
<form class="" action="index.html" method="post">
<input type="text" name="email" placeholder="Emailadres">
<input type="password" name="password" placeholder="Wachtwoord">
</form>
</div>
<div class="eq">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
</div>
</div>
However I had to delete position: absolute. If it's not what you want, please give us more details.

Answer 2

Change your css to this, worked for me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.boxes {
position: absolute;
background-color: #000;
display: flex;
margin-top: 25px;
width: 100%;
text-align: center;
}
.box {
position: relative;
width: 300px;
max-height: 400px;
min-height: 233px;
padding: 15px;
border: 1px solid #e6e6e6;
overflow-wrap: break-word;
background-color: #fff;
margin-right: 20px;
}

Answer 3

i wouldn't make this as absolute, these .box divs need to be relative, you can make the .boxes a "position absolute".
https://jsfiddle.net/DamianToczek/3w50gj28/4/
Make the .boxes absolute, the ID .box cant be absolute you always make a container that is absolute. If you want to make .box absolute, you need to give them another id like .box1 .box2 .box3, the best option is always a container that holds the "centered" items, the container is .boxes for you:
.boxes {
width:100%;
position:absolute;
}