Center div in middle of other two divs in CSS - html

Question

So, I have this example of how my three divs are suppose to be. I've been playing around with the position:relative in the container and then position:absolute in the three children divs. The thing is I feel like its not the best approach. What do you guys think?
This is the code I currently have:
.container{
position: relative;
height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
}
#round-image{
position: absolute;
left: 35%;
top: 30%;
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
}

Answer 1

I don't see any problem with using absolute positioning in this case, if it meets your needs, it's just okay to use it.
However it seems the third DIV #round-image is not aligned properly at the middle, because of using a mix of absolute length px and percentage for sizing/positioning the box.
Considering the following markup, the issue can be fixed by:
1. using negative margins on on the third DIV.
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
2. Or using calc() function:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
3. Or using CSS transform:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
transform: translate(-50%, -50%); /* vendor prefixes ommited due to brevity */
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
It's worth noting that the two last methods are only supported on IE9+.

Answer 2

You want the circle in the middle I would imagine?
If you don't care for validation then you can simply put center tags and the div you want in the middle between them tags or you can use the "Margin" aspect of CSS to align it in the center

Answer 3

The only thing, I think is in a need of improvement is the way you center positioned the circle element. Giving it 50% absolute positions and half-width negative margins would ensure it would be in a good place whatever the dimensions are.
.container{
position: relative;
height: 700px;
width: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: black;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: grey;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
border-radius: 50%;
background: pink;
}
<div class="container">
<div id="top-div">
</div>
<div id="round-image">
</div>
<div id="bottom-div">
</div>
</div>