Html 如何将图像居中放置在2个div上

我试图有所成就，但徒劳无功。我把这张图片放在下面，它值千言万语

基本上，我试图将div3放在div2的中心，在div1和div2之间，以获得以下结果

下面是我的HTML和CSS代码：

HTML

<div id="container">
    <div id="leftSide">
        <!-- 1. -->
    </div>

    <div id="rightSide">
        <!-- 2. -->
        <div id="circle">
            <!-- 3. Contains the image -->
        </div>
    </div>
</div>

---

我不清楚如何实现它。感谢您的帮助。谢谢。

可以使用

位置：绝对（以及如下所示的位置）到
#圆
和
位置：相对于
#容器

这是小提琴：

假设将“圆”div设置为静态高度/宽度，则可以将其绝对定位为左上50%，然后将负边距设置为圆div大小的一半

HTML:

<div id="container">
    <div id="leftSide">
        <!-- 1. -->
    </div>

    <div id="rightSide">
        <!-- 2. -->
    </div>

    <div id="circle">
        <!-- 3. Contains the image -->
    </div>
</div>

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

您需要为圆指定
#容器的
相对定位和
绝对定位。
#容器{
宽度：600px；
浮动：左；
填充：0；
保证金：0自动；
位置：相对位置；
}
#左边{
宽度：300px；
高度：300px；
浮动：左；
背景颜色：蓝色；
}
#右侧{
宽度：300px；
高度：300px；
浮动：对；
背景色：红色；
}
#圈{
宽度：100px；
高度：200px；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
背景色：黑色；
}
#圆形img{
宽度：100px；
高度：100px；
}
您可以尝试使用

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

#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将元素下降50像素

左：50px将元素向右移动50px
根据您的喜好和需要，您可以选择以下4个模板之一：


#1个使用
位置
、
顶部
、
底部
、
左侧
、
右侧
和
边距
属性的中心圆

#容器{
高度：300px；
/*准备#容器到中心#圆圈*/
位置：相对位置；
}
#左边{
背景颜色：蓝色；
浮动：左；
身高：100%；
宽度：50%；
}
#右侧{
背景色：红色；
浮动：对；
身高：100%；
宽度：50%；
}
#圈{
背景色：黑色；
边界半径：50%；
高度：140像素；
宽度：140px；
/*中心#内圆#容器*/
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
嘿，伙计们，我遇到了和初学者一样的问题。因此，为了达到这个效果，我必须将容器的位置设置为相对，将图像的位置设置为绝对……效果非常神奇
-享受吧
 我已经试过了，但在我的实际代码中，circle div有几个图像，一个在另一个下面。现在，当我应用它的工作，我看到一个图像在中心，但其他图像消失。为什么？这个解决方案是针对这个问题的。你能发布你的实际代码吗？我试过了，但在我的实际代码中，circle div有几个图像，一个在另一个下面。现在，当我应用它的工作，我看到一个图像在中心，但其他图像消失。为什么会是这种情况？@nTuply因为，正如我所提到的，只有当circle div具有静态高度和宽度（如您的示例中所示）时，此解决方案才有效。您需要计算出实际站点上div的高度和宽度，并将
边距顶部
和
边距左侧
的值更改为div大小的负一半（
-50px
，因为div的宽度和高度均为
100px
），圆圈div有几个图像，一个在另一个下面。现在，当我应用它的工作，我看到一个图像在中心，但其他图像消失。为什么？我完全明白。谢谢：）
#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 */;
}