Search code examples
htmlcsspositionvertical-alignment

Center div in middle of other two divs in CSS

example

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%;
}
Solution

  • 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+.