CSS文本在响应式站点中垂直对齐答案

【问题标题】：css text align vertically in responsive siteCSS文本在响应式站点中垂直对齐
【发布时间】：2014-06-18 21:48:59
【问题描述】：

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

当我把浏览器变小时，它看起来像这样：

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

我该怎么做？

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/

【问题讨论】：

标签： html css responsive-design alignment

【解决方案1】：

你也可以试试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

【讨论】：

好的，感谢您的信息，但我不需要关心这个项目中的 ie8，感谢上帝！

【解决方案2】：

使用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/

【讨论】：

谢谢，但现在您更改了包装器的宽度。它必须是 100% 宽