垂直和居中对齐文本

Question

I have a h1 within the body and want to vertically align and center align this text.

I know I can use the position: absolute; and then margin-top: "HALF OF HEIGHT"; but this h1 changes on refresh and has different widths. The height is always the same so I can vertically align it fine but it's center aligning it. I can't use text-align: center; becuase the h1 is positioned absolute so it won't work.

Is there an easier way to do this?

Thanks!

Answer 1

Given that the element doesn't have a background, you could do this to horizontally center an element with absolute positioning:

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

A working fiddle: http://jsfiddle.net/VSySg/

Answer 2

Depending on the rest of your layout, this may work:

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

http://jsfiddle.net/xC3vn/