css文本在响应式网站中垂直对齐

Question

我在像这样的div中有一个标题

当我使broswer变小时，它看起来像这样：

但我希望它看起来像这样：

我该怎么做？

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

使用vertical-align，text-align和display css属性在Div中垂直和水平居中呈现文本。

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

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

JS小提琴：http://jsfiddle.net/4cBxt/2/

Answer 2

您还可以尝试transform属性：

.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