Vertikale Ausrichtung funktioniert nie

Question

Ja, offensichtlich mache ich es falsch. Warum kann es nicht so einfach sein wie horizontal auszurichten? Ich setze mich und meine Arbeit wird stundenlang angehalten, um nach oben zu schauen, wie ich mich vertikal in der Mitte ausrichtet, also muss ich euch nicht mit meinem blöden höchstwahrscheinlich wirklich einfachen Sie Frage befragen.

Display Block oder Table-Cell, alles was ich lese funktioniert nie. Ich dachte "vielleicht, wenn ich meine img mit .divID img horizontal ausrichten und dann das div selbst vertikal ausrichten" traurig, ich wünschte, das würde funktionieren. Aber selbst wenn ich versuchte, das div vertikal in der Mitte zu zentrieren, verwirrte es die Bildzentrierung und funktionierte nicht einmal.

TL; DR: Ich zu versuchen, Hass vertikal Sachen ausrichten so viel.

Ich versuche, mein Headerbild vertikal und horizontal zentriert zu bekommen. Das ist mein Code, den ich arbeite.

HTML

<div id="wrapper"> 
    <div id="header"> 
     <div id="logo"> 
      <img src="http://i.imgur.com/d0umnxt.png" /> 
     </div> 
    </div> 
</div> 

CSS

body { 
    margin: 0px; 
} 
#header { 
    width: 100%; 
    height: 100px; 
    background-color: #151B1F; 
} 
#logo { 
    display: block; 
    margin: auto; 
} 

Answer 1

Ich hasse table und table-cell genauso viel wie der nächste Kerl, aber wenn Sie wissen, die Höhe des Elternelements (#header in Ihr Fall), werden die Dinge wirklich einfach.

Here's a working fiddle.

Sie müssen nur die folgenden Stile zu Ihrem CSS hinzufügen:

#header { 
    display: table; 
} 
#logo { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}