Positioning A Circle In The Middle Of Two Divs - html

Question

I have one DIV positioned right.
.right {
width:25%;
height:100%;
background-color:#000;
position:fixed;
right:0px;
z-index:1;
And left
.left {
width:25%;
height:100%;
background-color:#000;
position:fixed;
left:0px;
z-index:1;
And I'm trying to put this circle
.circle {
height:100px;
width:100px;
border-radius:50px;
background-color:#F00;
position:fixed;
left:45%;
z-index:99;
in the middle
this is my HTML
<div class="left">
</div>
<div class="centerc">
<div class="circle">
</div>
<div class="right">
</div>
What am I doing wrong and how do I fix it?

Answer 1

Your code seems to be working. However, the circle is off-center.
I suggest that you define the circle's position as 50% of the container's width minus 50% of the circle's width:
.circle {
...
width:100px;
left:50%;
margin-left:-50px;
}
Also, since everything is position:fixed, I don't see the purpose of div.centerc. I removed it.
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
Working example (jsFiddle)

Answer 2

Try to put this inside .circle styling:
left:50%;
margin-left:-50px;
left:50%; will put the left side of the .circle in the middle of the screen, then margin-left:-50px; will put the .circle 50px to the left (half of its width).
Also, it's a good idea to remove the non-closed .centerc div.
Demo
*{margin:0;}
body{
background:#fff;
}
.left{
position:fixed;
height:100%;
width:25%;
left:0;
background:#222;
}
.circle{
z-index:1;
position:fixed;
width:100px;
height:100px;
left:50%; /* Left side of the circle centered */
margin-left:-50px; /* A half of circle width to the left */
border-radius:50px;
background:#F33;
}
.right{
position:fixed;
height:100%;
width:25%;
right:0;
background:#222;
}
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>

Answer 3

If you are meaning to have the left and right divs aligned and the circle div floating over them in dead center here's a quick fiddle to set you in that direction.
http://jsfiddle.net/Hastig/zLsbE/
I added a container div wrapped around all three (left, right and circle) and set it to position: relative
I then set the circle div to position: absolute and played with it's left and top alignment to center it.
Note - It's not a responsive solution.
.container {
width: 500px;
height: 250px;
position: relative;
}
.left {
float: left;
width: 250px;
height: 250px;
background-color: #000;
}
.right {
float: right;
width: 250px;
height: 250px;
background-color: #555;
}
.circle {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: #F00;
position: absolute;
top: 75px;
left: 200px;
}
<div class="container">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>

Answer 4

http://jsfiddle.net/R8YRh/1/ demonstrates using:
.centerc {
text-align:center;
}
and the addition of display: inline-block; to .circle. This required the addition of top: 0; to .right.
.left {
width:25%;
height:100%;
background-color:#000;
position:fixed;
left:0;
z-index:1;
}
.right {
width:25%;
height:100%;
background-color:#000;
position:fixed;
right:0;
top: 0;
z-index:1;
}
.centerc {
text-align:center;
}
.circle {
display: inline-block;
height:100px;
width:100px;
border-radius:50px;
background-color:#F00;
z-index:99;
}
<div class="left"></div>
<div class="centerc">
<div class="circle"></div>
</div>
<div class="right"></div>