Vertical Align text in a fluid div

Question

I wonder how to align verticaly my text in a div.

I've tried things like display: inline block; but it didn't help. My container is actually 10% height of the whole window.

Please see my code below, the refering div is "droite".

https://jsfiddle.net/5zh9qgnw/

.droite{
        width: 73%;
        height: 100%;
        float:right;
        background-color: #232200;
        text-align: center;
        color: white;
    }

    .gauche{
        width: 27%;
        text-align: center;
        float: left;
        background-color: #afafaf;
    }

    #aszone, #gzone{
        margin-left: 20px;
        margin-right: 20px;
        height: 10%;
        text-align:center;
        background-color: black;
        background-size: cover;
    }

Answer 1

https://jsfiddle.net/o9ouvqnx/

Table cell usually works. Style 'gzone' to resize/float the table, or regular table css.

.gauche{
    width: 27%;
    text-align: center;
    display:table-cell;
    background-color: #afafaf;
}

.droite{
    width: 73%;
    height: 100%;
    background-color: #232200;
    text-align: center;
    color: white;
  display:table-cell;
  vertical-align:middle;
}

.textg{
    display:table-cell;
}

Answer 2

set parent(gzone) display:table; and child(.gauche,.droite ) display:table-cell;

 .gzone{ display:table; }  
 .gauche,.droite { display:table-cell; vertical-align:middle; }

Answer 3

• Display #gzone as table
• Display .gauche and .droite as table-cell
• (optional but recommended) add a new div displayed as table-row inside #gzone to contain .gauche and .droite
• If you're going to use table/table-row/table-cell, then don't use float , because float will remove the table layout effect.

Here's a demo: https://jsfiddle.net/Lsyco9zv/

Now, all you need to do, play with the padding and width of .gauche and .droite to get what you need.