CSS文本垂直对齐中间

Question

I got a problem. I am trying to make an image with a hover. I got some text in the div. Now i want the text to be centered of the div. I used:

display: table-cell;
vertical-align: middle;

The text is Almost in the middle of the Div. When i add more text to it, you will see that the text isnt centered.

Live Example: http://jsfiddle.net/DennisBetman/6TkkE/

I hope some of you know the problem and can help me.

Answer 1

You made your <h1> have a position:absolute , but there was no container that it was positioned relative to.

I took position:absolute and height:100% off of the <h1> . then I added position:relative to its container .text

Here's the fiddle to show this: http://jsfiddle.net/6TkkE/5/

Answer 2

Here is a nice workaround for this, which worked fine for my purpose: Get a container of your size (relative is fine too). Make it's position relative, place a span or p inside it with absolute position. Give it a line-height, maybe 30px. Depends on your font size. Then center it with left and top, fix the margin and the width must be 100% to apply text-align: center.

.container {
    position: relative;
    width: 800px;
    height: 600px;
}
.container > span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -50%;
    line-height: 30px;
    width: 100%;
    text-align: center;
}
...
<div class="container">
    <span>Vertical and Horizontal align.</span>
</div>

Worked fine for me!