Flexbox vertikale und horizontale Mitte

Question

Ich habe eine sehr sehr einfache Markup und CSS, aber aus irgendeinem Grund kann ich nicht scheinen, die divs mit flexbox zu zentrieren. (Horizontal und vertikal)

Ich habe durch viele Fragen/Antworten gegangen - aber ich kann den Täter nicht finden ..

Alles ist extrem einfach, Container, zwei divs:

<div id="content"> 
     <div class="logo-box box"> 
      <img alt="logo" src="http://placehold.it/222x320?text=logo"> 
     </div> 
     <div class="main-box box"> 
      <h2>loremIpsum</h2> 
      <span>Powerful Slogan&trade;</span> 
      <ul class="info"> 
       <li> 
        <h3>Add. 地址</h3> 
        <p>(HK) Street, level, , Bulding ,room, etc ..</p> 
        <p>(CN) 中国广东.. yep, in chinese ..106</p> 
       </li> 
       <li> 
        <h3>Tel . 电话</h3> 
        <p>HK (+852) 970-0000 </p> 
        <p> CN (+86) 0757-000000 </p> 
       </li> 
       <li> 
        <h3>Mail. 邮件</h3> 
        <p>info@domain.com </p> 
        <p> admin@domain.com</p> 
       </li> 
      </ul> 
     </div> 
    </div> 

und flex css für den Container:

#content { 
    display:flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-content: center; /*should not matter - only one row*/ 
    align-items: center; 
} 

Wenn Sie den Reset hinzufügen, ist es noch seltsamer. (Warum ??)

ist hier ein js ist: https://jsbin.com/jihaji/edit?html,css,output

Gibt es etwas falsch mit meinem Markup, das ich nicht sehen kann? Mit dem CSS? Oder mit meinem ganzen Verständnis der flexbox?

Answer 1

Der Übeltäter ist, dass Sie keine zusätzliche Höhe in Ihrem Flex-Container haben.

Da die Höhe der Box die Höhe des Inhalts ist (height: auto Standard), ist kein Platz mehr für die vertikale Zentrierung vorhanden.

Fügen Sie diese auf Ihren Code:

#content { height: 100vh }