Wie zentriere ich ein Div innerhalb eines Divs?

Question

mein HTML ist wie folgt:

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

ich die Syntax, um die div id „Drop-Down“ innerhalb div id „background_div“ (Kind/Eltern), weil ich dachte, es kann helfen, mich Zentrum mit einer Art relativ zu haben verändert CSS-Funktion. Ich hatte ursprünglich die zwei divs als Geschwister ... Im Grunde alles, was ich versuche zu erreichen, ist das DropDown-Div-Smack-Bang in der Mitte des Background_div. Sei nett, es auf eine ansprechende Weise auch zu tun.

Kann mir bitte jemand ein CSS-Skript zur Verfügung stellen?

Vielen Dank!

Answer 1

Diese CSS nutzt Flexbox

#background_div { 
    display: flex; 
} 

#dropdown { 
    justify-content: center; 
} 

Answer 2

Sie text-align: center; zu dem CSS-Stil #background_div hinzufügen können, aber dann ist alles innerhalb von #background_div wird zentriert. Wenn Sie nur bestimmte Teile zentrieren möchten, wickeln Sie diese Teile in einem <span>-Tag mit der Klasse centered, also <span class="centered">. Dann in Ihrem CSS, fügen Sie in

.centered { 
    text-align: center; 
} 

Jetzt können Sie ein <span class="centered"> um etwas hinzufügen, die Sie zentriert werden soll.

Answer 3

meine bevorzugte Methode, um vertikal Zentrum etwas zu tun:

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

Dies wird wahrscheinlich vermasseln Ihre horizontale Mitte, wenn Sie text-align Center verwenden. In diesem Fall fügen Sie diese zu Ihrer css

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

so Ihre endgültige Code wird wie folgt aussehen:

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

#background_div { 
    position: relative; 
}