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

• 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.