Question

I want to vertically middle align text in a div that has height in percentage. The code i am using is this.

CSS-

.div{
    position: fixed;
    left: 0px;
    border-radius: 10px;
    height: 6%;
    width: 20%;
    transform: translate(-10px,0px);
    -ms-transform: translate(-10px,0px);
    -webkit-transform: translate(-10px,0px);
    -o-transform: translate(-10px,0px);
    -moz-transform: translate(-10px,0px);
    z-index: 10
}
.div span {
    text-align: center;
    font: 20px/100% Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #fff;
    display: block;
    vertical-align: middle;
}

HTML-

<div class="div"><span>This is some text.</span></div>

This isnt working. Please help.

Answer 1

You can use the parent div display as table and child div display as table-cell or another approach if you use a text with one line then use line-height property.

Css with table-cell display See fiddle

.div{
position: fixed;
left: 0px;
border: 1px solid black;
border-radius: 10px;
height: 50%;
width: 20%;
z-index: 100;
display: table;
}
.div span {
text-align: center;
font: 20px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
display: block;
vertical-align: middle;
display: table-cell;
}

Css with line-height See fiddle