Struggling to dynamically center a group of relative positioned divs within a parent div that is also relative positioned.
The parent div has a width of 620px, while the child divs are each 200px wide. There could be 1 to 3 child divs per line, which is why I am attempting to center the group of child divs within the parent div dynamically. For instance, if there is only one child div, it should be centered in the parent div, or if there are two child divs, they should both be centered.
I initially considered using inline-block for the child divs, but complications arose from the absolute positioning of other divs inside them, rendering inline-block ineffective.
This is my current css implementation, and a working example can be seen here: https://jsfiddle.net/y3ghpkvs/
.parentClass {
position: relative;
width: 620px;
height: 500px;
background-color: gray;
}
.childClass {
position: relative;
width: 200px;
height: 400px;
float: left;
margin-left: 5px;
background-color: white;
}
.insideChildDiv1 {
position: absolute;
width: 100%;
height: 95px;
top: 0;
left: 0;
background-color: black;
color: white;
text-align: center;
line-height: 100px;
}
.insideChildDiv2 {
position: absolute;
width: 100%;
height: 200px;
top: 100px;
left: 0;
background-color: green;
}
.insideChildDiv3 {
position: absolute;
width: 100%;
height: 95px;
bottom: 0;
left: 0;
color: white;
text-align: center;
line-height: 100px;
background-color: black;
}
If anyone has tips on how to properly center the 2 childClass divs inside the parentClass div, please share! Thanks!