CSS HTML 在 td 中放置几个​​居中的 div

Question

首先，当我说居中时，我指的是垂直居中和水平居中。

我有一个包含多个图 block (div) 的表格，就像在带有 background.images 的 Windows 8 中一样。每个图 block 都有一个带有说明和半透明背景的居中标签(也是一个 div)。

现在我想在磁贴本身和标签之间添加另一个 div。这些 div 应该有一个半透明的背景颜色作为底层 tile-image-div 的覆盖。

但是当我添加这个 overlay-div 时，我的标签不再水平居中，而是放置在图 block 的顶部。我怎样才能让它居中？

这是我在 fiddle 上的代码: fiddle (请看)

( fiddle 代码中的问题是这一行:

<div class="SemiTransOverlay">

当我删除这个 div 时，一切都正确居中。我必须更改什么才能使一切居中并保持 div？)

Answer 1

首先，为什么要使用表格进行布局？我们在 21 世纪，所以开始使用 div，为了完成半透明 div 以放置在标签后面和垂直对齐的标签，您需要使用 position: absolute; 和 top: -50% ;，我还为 div.SemiTransLabelGross 修改了 line-height，还使用了 position: relative 和 z -index 属性

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 */
}