Centre div over four divs within container on responsive site

Question

This is the image I have:

How do I centre the black circle, I have tried a number of ways, best has been using absolute, but i cannot make it responsive.

Its on JSFIDDLE

And here is the code:

HTML

<div class="main">
    <div class="center"></div>
    <div class="leftTop"></div>
    <div class="rightTop"></div>
    <div class="leftBottom"></div>
    <div class="rightBottom"></div>
</div>

CSS

.main {
    position:relative;
    width:100%;
    height:100%;
}

.rightTop {
    float:right;
    background-color:red;
    min-width:50%;
    height:250px;
}

.leftTop {
    float:left;
    background-color:blue;
    min-width:50%;
    max-width:50%;
    height:250px;
}

.rightBottom {
    float:right;
    background-color:yellow;
    min-width:50%;
    height:250px;
}

.leftBottom {
    float:left;
    background-color:orange;
    min-width:50%;
    max-width:50%;
    height:250px;
}

.center {
    position:absolute;
    left: 50%;
    top: 50%;
    height:400px;
    background-color:black;
    width:400px;
    border-radius:50%;
}

As I have said above, I have managed to centre it using LEFT, TOP but it is not responsive. Also it's not 50% as I would expect.

Any ideas what it is i am doing incorrectly ?

Answer 1

You could use positioning for this (getting rid of those inefficient and horrible float elements), in combination with the calc css3 property.

You may also be interested in using vw units, in which I have used to make the circle responsive to the width of the screen:

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  margin: 5vw;
  height: 80vh;
  width: 90vw;
  display: inline-block;
  position: relative;
}
.wrap div {
  position: absolute;
  height: 50%;
  width: 50%;
}
.wrap .red {
  background: tomato;
  top: 0;
  left: 0;
}
.wrap .yellow {
  background: yellow;
  top: 0;
  left: 50%;
}
.wrap .green {
  background: lime;
  top: 50%;
  left: 0;
}
.wrap .blue {
  background: cornflowerblue;
  top: 50%;
  left: 50%;
}
.wrap .black {
  background: black;
  height: 20vw;
  width: 20vw;
  border-radius: 50%;
  top: -webkit-calc(50% - 10vw);
  top: calc(50% - 10vw);
  left: -webkit-calc(50% - 10vw);
  left: calc(50% - 10vw);
}

<div class="wrap">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="black"></div>
</div>