如何使图像在 2 个 div 上居中

Question

我试图取得一些成就，但徒劳无功。我把图片放在下面了，它值一千字。

基本上我试图将 div 3（位于 div 2 中）精确地置于 div 1 和 2 之间，以获得以下结果

现在，这是我的 HTML 和 CSS 代码：

超文本标记语言

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

我对如何实现它没有明确的想法。任何帮助表示赞赏。谢谢。

Answer 1

可以通过position:absolute;（以及如下所示的位置）到#circle和position:relative来完成#container。

这是小提琴：http://jsfiddle.net/a081j6bv/1/

#container{
 position:relative;
}

#circle{
 position:absolute;
 left:0;
 top:0;
 bottom:0;
 right:0;
 margin:auto; 
}