Centre div over four divs within container on responsive site - html

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>

Answer 2

just add margin-left:-200px; in
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
margin-left:-200px;
}
here is the updated fiddle file

Answer 3

DEMO
Added:
top: 50%;, and left: 50%; to make it displayed relative to its parent: .main { position: relative
Added transform: translate(-50%, -50%) to center it. To center it on its own center point :D

Answer 4

You should be clearing the floats in your main container.
To do so add this to the main element:
<div class="main">
<div class="center"></div>
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
<div class="clearfix"></div>
</div>
<style>
/* Add this to your CSS */
.clearfix{
clear:both;
}
</style>
This will make the main container expand to the height of those floaters. After that you can use:
.center{
margin-top:-200px;
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
}
**OR**
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
transform:translate(-50%,-50%); /* This property doens't rely on pixels of the element, so the element can also be defined in percentages */
-webkit-transform:translate(-50%,-50%);
}

Answer 5

Add this css in your code:
.center {
background-color: #000000;
border-radius: 50%;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 400px;
}
See demo http://jsfiddle.net/JentiDabhi/gnhwork9/1/