CSS HTML在td中放置以severel为中心的div

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

我有一张有几个平铺（div）的桌子，就像Windows8中的background.images一样。 每个平铺都有一个中心标签（也是一个div），带有说明和半透明背景

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

但是当我添加这个叠加div时，我的标签不再水平居中，而是放在平铺的顶部。我怎样才能使它居中

这是我在小提琴上的代码： （请看一看）

（小提琴代码中的问题是这一行：

删除此div时，所有内容都正确居中。

---

我需要做什么改变才能使所有东西都居中并保持div？

垂直对齐，我要做的是设置

填充

而不是

高度

例如：

很抱歉误解了，从上面的答案来看，我想你希望浅粉色的div本身垂直居中。在这种情况下，将

填充
添加到其父级

div.SemiTransOverlay
{   
    width:100%;
    background-color:rgba(255, 255, 255, 0.5);
    padding: 20% 0;
}

或者，您也可以在

半易位十字{
利润率最高：20%；
}
首先，为什么使用表格进行布局？我们正处于21世纪，所以开始使用div，为了实现半透明div放置在标签后面和垂直对齐的标签，您需要使用
位置：绝对和<代码>顶部：-50%，我还修改了
div.semiteranlabelgross的
行高
，还使用了
位置：相对
和
z索引
属性


CSS

嘿，谢谢，但不幸的是这不起作用。这个位置是绝对的，不知怎么的，它射中了我的整个桌子。如果您在fiddle中更改几个窗口的大小，您可以看到覆盖层并没有固定。@user1567896请稍候，我会检查it@user1567896在这里，我将元素包装在一个位置相对容器中，并将位置绝对值用于标签分割。非常感谢，这非常有效：）！顺便说一下，你对桌子的看法是对的。我在大多数其他页面中使用div，但在这种情况下，我认为使用表会更容易。这对我不起作用，但是标签div仍然位于顶部。顺便说一下，我没有否决你的评论；）@用户1567896您希望“诸如此类”垂直对齐，对吗？我在你的JSFIDLE上进行了测试，效果很好。整个div'semiteranlabelgross'应该垂直和水平对齐。外星人先生的回答对我来说很好，但是非常感谢你的回答。
div.SemiTransLabelGross
{
    font-size:2em;
    font-family:Verdana;
    font-style:italic;
    line-height:120%;
    background-color: rgba(255, 255, 255, 0.75);
    width:404px;
    padding: 20px 0; /* removed the height property */
}

div.SemiTransOverlay
{   
    width:100%;
    background-color:rgba(255, 255, 255, 0.5);
    padding: 20% 0;
}

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