How to center an image over 2 divs - html

Question

I'm trying to achieve something but in vain. I have put the image below, it's worth a thousand words.
Basically I'm trying to center div 3, which is in div 2, between div 1 and 2 exactly to achieve the following result
Now, here's my HTML and CSS code:
HTML
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
<div id="circle">
<!-- 3. Contains the image -->
</div>
</div>
</div>
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}
#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
}
I don't have a clear idea on how to achieve it. Any help is appreciated. Thanks.

Answer 1

You could always try using the CSS position property?
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}
#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
position:absolute;
top:/* VALUE GOES HERE */;
left:/* VALUE GOES HERE */;
}
top:50px; drops the element down 50px
left:50px; moves the element to the right 50px

Answer 2

Can be done with position:absolute;(along with the positions as shown below) to the #circle and position:relative to the #container.
Here's the fiddle: http://jsfiddle.net/a081j6bv/1/
#container{
position:relative;
}
#circle{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}

Answer 3

Assuming that you are going to have the "circle" div set as a static height/width you can do it by positioning it absolutely 50% left and top and then set a negative margin to half the size of the circle div.
HTML:
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
</div>
<div id="circle">
<!-- 3. Contains the image -->
</div>
</div>
CSS:
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:right;
background-color: red;
}
#circle{
width: 100px;
height: 100px;
background-color: black;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
JSFiddle

Answer 4

You need to give the #container a relative positioning and an absolute positioning to the circle.
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position: relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:right;
background-color: red;
}
#circle{
width: 100px;
height: 200px;
position: absolute;
left:0;
right: 0;
top:0;
bottom:0;
margin: auto;
background-color: black;
}
#circle img{
width: 100px;
height: 100px;
}
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
<div id="circle">
<!-- 3. Contains the image -->
<img src="http://i.imgur.com/lrg4uy5.jpg"/>
<img src="http://i.imgur.com/RLKixQW.png"/>
</div>
</div>
</div>

Answer 5

According to your tastes and needs, you may choose one of the 4 following templates:
#1 Center circle using position, top, bottom, left, right and margin properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#2 Center circle using position, top, left, margin-top and margin-left properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 50%;
left: 50%;
margin-top: -70px;
margin-left: -70px;
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#3 Center circle using position, top, left and transform properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#4 Center circle using Flexbox
Note that the following HTML snippet is different from the previous ones.
#container {
height: 300px;
background: linear-gradient(90deg, blue 50%, red 50%);
/* prepare #container to center #circle */
display: flex;
align-items: center;
justify-content: center;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
}
<div id="container">
<div id="circle"></div>
</div>

Answer 6

hey guys i had the same problem as a beginner..so to achieve the effect i had to set the container's position to relative and the image's position to absolute...works like magic
-ENJOY!