引导程序中的垂直对齐

Question

Hi I'm having a bit of trouble with getting a piece of text to align vertically in the follow div:

           <div class = "col-md-12" style = "height:60%;padding:10px;">
              <div style = "background-color: #ffec31;height:100%;">
                 <p>
                    blah
                 </p>
              </div>
           </div>

(the inline styling is just for testing that will be taken out at some point)

I have no idea how to do this and I've tried various things including:

position: relative;
top: 50%;
transform: translateY(-50%);

but perhaps I'm doing something wrong.

Many Thank

Answer 1

http://jsfiddle.net/zj9v81t7/24/ see the jsfiddle.

.col-md-12{ height: 74px;
    padding: 10px;}
p {
    height: 20px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
}

Answer 2

https://gist.github.com/marioblas/9952094

/* Align vertically a column */
.v-align {
    float: none;
    display: inline-block;
    vertical-align: middle;
}