variable hauteur verticale à l'intérieur du centre divs enveloppe grand écran

Question

L'enveloppe est 1170px large - Hauteur variable/grand écran divs enfant se% largeur - hauteur variable (si i ai spécifié px dans le jsFiddle)

I J'ai utilisé la méthode table (parent)/table-cell (child) et ça ne marche pas. Marge 0 Auto ne semble pas aussi de faire quelque chose - je ne sais pas si elle a quelque chose à voir avec l'attribut de position relative de l'enfant ... 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; 
} 

Apprécierait des astuces!

Answer 1

Qu'en est-il d'essayer flexbox? Pour centrer votre contenu utilisez ce qui suit:

.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

vous pouvez également utiliser padding à .wrap pour rendre votre enfant dans le centre de leurs parents.

par exemple

padding: 40vh 0;