Question

At first, when I say centered, I mean both, vertically and horizontally centered.

I have a table with several tiles (divs) like in Windows 8 with background.images.
Every tile has a centered label (also a div) with a description and a semi transparent background.

Now I’d like to add another div between the tile itself and the label. These div should have a semi-transparent background-color as an overlay of the underlying tile-image-div.

But when I add this overlay-div, my label is not centered horizontally anymore, it is placed at the top of the tile. How can I keep it centered?

This is my code on fiddle:
fiddle (please take a look)

(The problem in the fiddle code is this line:

<div class="SemiTransOverlay">

When I delete this div everything is centered correctly.
What do I have to change to keep everything centered and keep div?)

Answer 1

first of all why you are using tables for layout purposes? we are in 21st century, so start using div’s and for accomplishing the semi transparent div to place behind the label and vertically aligned label you need to use position: absolute; and top: -50%;, I’ve also modified line-height for div.SemiTransLabelGross and also used position: relative and z-index properties

Demo

CSS

table.Kacheln
{
    border-spacing: 5px;
    border-collapse:separate;
    border:0px;
}

.wrap {
    position: relative;
    height: 100%;
}

td.KachelFlavourGross01
{
    text-align:center;
    /*background:url(../img/Div/bg.jpg) no-repeat 0 0;*/
    background-color:#FF0000;
    width:404px;
    height:200px;

}

div.SemiTransOverlay
{   
    height:100%;
    width:100%;
    background-color:rgba(255, 255, 255, 0.5);
    position: absolute;
    z-index: 1;
}

div.SemiTransLabelGross
{
    font-size:2em;
    font-family:Verdana;
    font-style:italic;
    line-height:60px;
    background-color: rgba(255, 255, 255, 0.75);
    width:404px;
    height:60px;
    z-index: 2;
    position: absolute;
    top: 50%;
    margin-top: -30px; /* Half of height */
}