Q:

Twitter Bootstrap : vertically align child div with height

I am using Bootstrap v3.1.1 to design web app.  I hav three divs in the middle div i have a small div and i need to place it vertically aligned.  
Here is what i got so far. 
    <body>
        <div class="row fill">
            <div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:red;">

            </div>
            <div class="col-md-4 col-sm-6 col-xs-10 parent" style="background-color:blue;">
            <div class="child"></div>
            </div>
            <div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:green;">

            </div>
        </div>
    </body>

I couldn't place the child div vertically aligned.  I tried following css. 
    .parent {
        display:table;   
        height:100%;    
        display:table;table-layout:fixed;
    }

    .child {
        vertical-align:middle;
        text-align:center;
        border:2px solid gray;
        height:40%;
    }

Someone please help,
Thanks. 

A:

So your problem was you wanted to vertically center-align a child div whose height was 40% but since you had given it as display:table-cell, it behaves like a <td> element and ignores the height. 
The solution is to place that child div in another container and apply the display:table-cell and vertical-align:middle to that container:
    <div class="row fill">
        <div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:red;">

        </div>
        <div class="col-md-4 col-sm-6 col-xs-10 parent" style="background-color:blue;">
        <!--  another container to vertical align the child div -->
        <div class="center-child">
         <div class="child">test</div>
        </div>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:green;">

        </div>
    </div>

DEMO

