javascript - 将两个 div 移动到中心，其中一个是另一个的克隆

Question

我正在尝试将两个 div 移动到页面的中心。 right div is a clone of left div (The images of left div is cloned into right div).当我尝试使用“left:100px”移动左侧 div 时，右侧会发生变形。如何将两个 div 移动到中心。请看下面我的鳕鱼的一些行。

var theRightSide= document.getElementById('rightside');
var leftimages= theLeftSide.cloneNode(true);
leftimages.removeChild(leftimages.lastChild);
theRightSide.appendChild(leftimages);

div {width: 600px; height: 600px}
#leftside {position: absolute;border: 3px solid black; background-color: lightYellow}
#rightside {position: absolute;left:600px;background-color: lightYellow}

<div id="leftside"></div>
<div id="rightside"></div>

Answer 1

尝试使用display: inline-block;

一个非常简单的例子来解释它是如何工作的-

.outer-box {
position: absolute;
left: 17%;
}
.box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid;
}

<div class="outer-box">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>