다른 요소를 기준으로 요소 가운데 맞추기

Question

다른 요소의 가운데에 수평 요소가 있어야합니다. 중심 요소의 CSS는 다음과 같습니다 (비정상 코드를 제거했습니다).

#center-element{ 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    position: absolute; 
} 

나는 바닐라 JS를 사용해야합니다. 나는 시도했다 :

var targetPos = target.getBoundingClientRect(); 
centerDiv.style.top = (targetPos.top + targetPos.height) + "px"; 
centerDiv.style.left = (targetPos.left + (targetPos.width/2)) + "px"; 

그러나 그것은 꺼져있다. 어떤 아이디어?

JSFiddle

Answer 1

는

//Somehow center the div here 
 
var target = document.getElementById("target"); 
 
var centerDiv = document.getElementById("centerDiv"); 
 
var targetPos = target.getBoundingClientRect(); 
 
centerDiv.style.top = targetPos.bottom + "px"; 
 
centerDiv.style.left = targetPos.left + (target.offsetWidth - centerDiv.offsetWidth)/2 + "px";

#target { 
 
    background-color: lightblue; 
 
    text-align: center; 
 
    width: 75%; 
 
} 
 
#centerDiv { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    position: absolute; 
 
}

<div id="target"> 
 
    This is the div 
 
</div> 
 
<div id="centerDiv"> 
 
    This is supposed to be horizontally centered <em>to the div element above</em> 
 
</div>

Answer 2

당신은 인 flexbox를 사용 할 수 있습니다. 컨테이너 div 안에 두 div를 모두 래핑하고 해당 컨테이너에 display:flex;을 적용 할 수 있습니다.

는

#target { 
 
    background-color: lightblue; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
#centerDiv { 
 
    /* display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    position: absolute; */ 
 
    text-align:center; 
 
} 
 
.container{ 
 
    display:flex; 
 
    width:75%; 
 
    flex-direction:column; 
 
    align-items:center; 
 
    justify-content:center; 
 
}

<div class="container"><div id="target"> 
 
    This is the div 
 
</div> 
 
<div id="centerDiv"> 
 
    This is supposed to be horizontally centered <em><br/>to the div element above</em> 
 
</div> 
 
</div>