Divs not in a straight line when centering them - html

Question

I am trying to center 4 div boxes in a straight vertical line using translate method you use when centering objects in the middle of the screen, this is the code I used:
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box1 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 20%;
left: 50%;
transform: translate(-20%, -50%);
}
.box2 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 40%;
left: 50%;
transform: translate(-40%, -50%);
}
.box3 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 60%;
left: 50%;
transform: translate(-60%, -50%);
}
.box4 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 80%;
left: 50%;
transform: translate(-80%, -50%);
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</div>
I tried multiple methods to fix this, but I would not like to centre them using pixels because I am using this on a responsive website.

Answer 1

If absolute positioning, you can use left: 50% with a negative translateX of 50%.
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
left: 50%;
transform: translateX(-50%)
}
.box1 {
top: 20%;
}
.box2 {
top: 40%;
}
.box3 {
top: 60%;
}
.box4 {
top: 80%;
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</div>
</div>
That said, you could use flexbox to achieve this layout without having to know the number of the boxes in advance for the purpose of vertical spacing.
html,
body {
margin: 0;
padding: 0;
color: #248b98;
font-family: "Open Sans", sans-serif;
}
.body-component {
background-color: black;
height: 100vh;
border: 10px solid #ff6d00;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-betwen;
align-items: center;
min-height: 500px;
}
.snippet-title {
flex: 0 1 auto;
text-decoration: underline;
padding: 10px;
}
.code-snippet {
flex: 1 1 auto;
display: flex;
}
.boxes {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 15px;
}
.box {
width: 30px;
height: 30px;
background-color: #056ab3;
}
<div class="body-component">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>

Answer 2

Try this... add transform: translate(-50%, -50%); to box classes
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box1 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.box2 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.box3 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.box4 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</div>