div를 div의 가운데에 배치하는 방법은 무엇입니까?

Question

내 HTML은 다음과 같습니다 : 나는 상대 일종을 사용하여 나를 중심 도움이 될 수 있습니다 생각했기 때문에

<div id="background_div"> 
    <img id="background_img" src="images/background.jpg" alt="dont matter"> 
    <i class="material-icons">perm_identity</i> 
    <div id="dropdown"> 
     <ul id="dropdown2" class="dropdown-content"> 
     <li><a href="#!">one<span class="badge">1</span></a></li> 
     <li><a href="#!">two<span class="new badge">1</span></a></li> 
     <li><a href="#!">three</a></li> 
     </ul> 
     <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Select Service<i class="mdi-navigation-arrow-drop-down right"></i></a> 
    </div> 
    </div> 

내가 DIV ID가 "background_div"(자녀/부모) 내부 DIV ID가 "드롭 다운"을 가지고 구문을 변경 CSS 기능. 원래 형제로 두 divs했다 ... 기본적으로, 내가 달성하려고하는 모든 background_div 중간에 드롭 다운 div 매 취하기 점점. 반응 적으로도 그렇게 해줘서 기쁘다.

누구나 달성 할 수 있도록 CSS 스크립트를 제공해주십시오.

감사합니다.

Answer 1

이 CSS는 Flexbox

#background_div { 
    display: flex; 
} 

#dropdown { 
    justify-content: center; 
} 

Answer 2

의 사용 당신은 #background_div의 CSS 스타일에 text-align: center;을 추가 할 수 있지만 다음 #background_div 내부의 모든 것이 중심됩니다 수 있습니다. 특정 부품 만 중앙에 배치하려면 <span> 태그에 해당 부품을 포장하고 centered 클래스로 포장하십시오 (예 : <span class="centered">). 그런 다음 CSS에서, 이제 당신이 <span class="centered"> 당신이 중심 싶은 것을 주위에 추가 할 수 있습니다

.centered { 
    text-align: center; 
} 

에 추가 할 수 있습니다. 수직 중심 뭔가

Answer 3

내가 가장 좋아하는 방법은하는 것입니다 :

/* the div you want centered inside another div*/ 

#dropdown { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

/* set the parent div to position relative */ 

#background_div { 
    position: relative; 
} 

이 아마 엉망 당신의 수평 센터를 텍스트 - 정렬 센터를 사용하는 경우 것입니다.

당신이 볼

#dropdown { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 100px; 
    margin: 0 auto; 
} 

#background_div { 
    position: relative; 
}