Hover box with (vertically and horizontal) centered text [duplicate]

Question

I made a on-hover-information-box for an image-mosaic for a client. When the person hovers the image (different orientations, so its flexible sized) he gets another div above it with some informations. The flexibility is the problem: I want the content of the div vertically and horizontal centered. At the moment it looks like this:

.linkbox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 1.9em;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

But I want to the stuff to appear in the middle of the box. So my first thought: padding-top:40%; and a height of (maybe!?) 50% and the rest for the Information. I know I have to make the size in % too but thats just gross. Do you have any idea?

The project is here: http://www.davidgoltz.de/2011/archive/

Answer 1

You have a look at this : Link http://jsfiddle.net/qfXVa/2/

div.linkbox {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    display: table;
    vertical-align: middle;
}

div.linkbox div {
    display: table-cell;
    vertical-align: middle;
}

I basically set a container for the text content and aligned it Vertically and Horizontally middle to the parent.

Answer 2

This is the best guide I have found to vertically centering/aligning content:

http://phrogz.net/css/vertical-align/index.html

From the guide, you could use the following CSS:

<span style="display:inline-block; vertical-align:middle">Your content</span>