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機能。私はもともと2つのdivsを兄弟として持っていました...基本的に、私が達成しようとしているのは、background_divの真ん中にあるドロップダウン・ディク・スワック・バンを得ることです。応答性のあるやり方でやってもいいですか。

誰でも達成するのに役立つCSSスクリプトを提供していただけますか？

ありがとうございました！

Answer 1

このCSSはFlexbox

#background_div { 
    display: flex; 
} 

#dropdown { 
    justify-content: center; 
} 

Answer 2

の使用あなたが#background_divのCSSスタイルにtext-align: center;を追加することができますが、その後#background_divの内部すべてが中心になりますになります。特定のパーツのみを中央に配置する場合は、centeredという<span>タグでその部分をラップします（<span class="centered">）。次に、あなたのCSSで、

.centered { 
    text-align: center; 
} 

に追加今あなたが中心になりたい何でも周り<span class="centered">を追加することができます。

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

これますおそらく台無しにあなたの水平方向の中心をテキストアラインセンターを使用している場合。その場合ので、あなたの最終的なコードは次のようになりますあなたのCSS

width: 100px; /* give it any width that fits */) 
margin: 0 auto; 

にこれを追加します。あなたが見

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

#background_div { 
    position: relative; 
}