html - 垂直和居中对齐文本

Question

我有一个h1在里面body并且想要垂直对齐和居中对齐这个文本。

我知道我可以使用position: absolute;thenmargin-top: "HALF OF HEIGHT";但是这个 h1 在刷新时会发生变化并且具有不同的宽度。高度始终相同，因此我可以很好地垂直对齐它，但它是居中对齐的。我不能使用text-align: center;，因为 h1 是绝对定位的，所以它不起作用。

有没有更简单的方法来做到这一点？

谢谢！

Answer 1

鉴于该元素没有背景，您可以这样做以将具有绝对定位的元素水平居中：

.your-element {
    position: absolute;
    width: 100%;
    text-align: center;
}​

一个工作小提琴：http: //jsfiddle.net/VSySg/

Answer 2

根据您的布局的其余部分，这可能会起作用：

h1 {
    display: block;
    text-align: center;
    line-height: /* height of container */
}

http://jsfiddle.net/xC3vn/