Vertically Zentrum mit variabler Höhe divs innerhalb Vollbild-Wrapper

Question

Der Wrapper 1170px breit ist - Variable/Vollbild Höhe Kind divs% Breite sind - in der Höhe variabel

ich (obwohl ich px in der jsfiddle angegeben haben) habe die table (parent)/table-cell (child) -Methode benutzt und das funktioniert nicht. Margin 0 Auto scheint auch nichts zu tun - ich bin nicht sicher, ob es etwas mit der relativen Position Attribut des Kindes divs ...

https://jsfiddle.net/x3cm32my/

.wrap { 
    background: grey; 
    margin-left: auto; 
    margin-right: auto; 
    width: 1170px; 
    min-height: 100vh; 
    vertical-align: middle; 
    text-align: left; 
    display: table; 
} 

.mod-left { 
    background: blue; 
    margin:0 auto; 
    width: 30%; 
    height: 100px; 
    float: left; 
    vertical-align: middle; 
    position: relative; 
    display: table-cell; 
} 

.mod-right { 
    background: green; 
    margin:0 auto; 
    width: 65%; 
    float: right; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    height: 150px; 
    position: relative; 
} 

Würde zu tun schätzen Irgendwelche Tipps!

Answer 1

Wie wäre es mit einer Flexbox? Zum Zentrieren Sie Ihre Inhalte der folgenden verwenden:

.wrap { background: grey; margin-left: auto; margin-right: auto; width: 1170px; min-height: 100vh; text-align: left; display: flex; justify-content: center; align-items: center;} 

Answer 2

Sie auch padding bei .wrap verwenden können, um Ihr Kind in der Mitte ihrer Eltern zu machen.

beispiels

padding: 40vh 0;