如何将图像居中于2个div

Question

我正在努力实现某些目标但却徒劳无功。我把图像放在下面，它值得一千个字。

基本上我正试图将div 3中的div 3，div 1和2之间的中心完全对应，以实现以下结果

现在，这是我的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>

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

Answer 2

假设您要将“circle”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>

<强> 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 3

您可以随时尝试使用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; 将元素降低50px

left:50px;将元素移至右侧 50px

Answer 4

您需要为圈子提供#container relative定位和absolute定位。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

根据您的品味和需求，您可以选择以下4个模板中的一个：

＃1使用position，top，bottom，left，right和margin属性

的中心圈

＆＃13;

＆＃13;

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

＆＃13;

<div id="container">
    <div id="leftSide"></div>
    <div id="rightSide">
        <div id="circle"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

＃2使用position，top，left，margin-top和margin-left属性的中心圈

＆＃13;

＆＃13;

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

＆＃13;

<div id="container">
    <div id="leftSide"></div>
    <div id="rightSide">
        <div id="circle"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

＃3使用position，top，left和transform属性的中心圈

＆＃13;

＆＃13;

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

＆＃13;

<div id="container">
    <div id="leftSide"></div>
    <div id="rightSide">
        <div id="circle"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

＃4使用Flexbox的中心圈

请注意，以下HTML代码段与之前的代码段不同。

＆＃13;

＆＃13;

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

＆＃13;

<div id="container">
    <div id="circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

嘿伙计们我和初学者有同样的问题。为了达到这个效果，我必须将容器的位置设置为相对位置，将图像的位置设置为绝对...就像魔法一样 -ENJOY！