css text align vertically in responsive site

Question

I have a header in a div like this

When I make the broswer small it looks like this:

But I want it to look like this:

how do I do that?

html:

<div class="wrapper">
        <h4>ALongText LikeThisOne</h4>
</div>

css:

.wrapper{
    border:1px red solid;
    height:60px;
}

.wrapper h4{
    margin-top: 0;
    padding-top: 20px;
    text-align: center;
}

jsfiddle: http://jsfiddle.net/4cBxt/

Answer 1

You can also try transform property:

.wrapper h4 {
    margin-top: 0;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

Working fiddle

Answer 2

Use vertical-align, text-align along with display css properties to render the text within the Div vertically and horizontally center.

.wrapper{
 border:1px red solid;
 height:60px;
 display: table;
}

.wrapper h4{
  margin-top: 0;   
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

JS Fiddle : http://jsfiddle.net/4cBxt/2/