三个 div 定位在表格单元格内

Question

请帮我将表格单元格内的三个 div 对齐如下：

两个小 div 绝对位于表格单元格的右上角和左下角。 一个 div 应该在表格单元格内垂直和水平居中。 根据单元格高度，小 div 应该能够与居中的 div 重叠。

我设法对齐了中心 div。但我不知道如何实现小 div。

  <div style=" #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; text-align: center; width:inherit; height:inherit;">
      <div style=" #position: relative; #top: -50%;  margin-left: auto; margin-right: auto; background-color: green ">
        first line<br>
        second line
    </div>
</div> 

这是我目前拥有的： http://jsfiddle.net/zm2WW/5/

谢谢

Answer 1

我稍微清理了你的代码。有关演示，请参阅 http://jsfiddle.net/zm2WW/12/。

这是中间表格单元格现在的样子：

<table>
    <tr>
        <td>
        </td>
        <td>
            <div class="containingBlock">
                <span class="topSpan">TopSpan</span>
                <div class="centerCell">text</div>
                <span class="bottomSpan">2</span>
            </div>
        </td>
        <td></td>
    </tr>
</table>​

还有你的 CSS：

td {
    border: 1px solid;
    width: 200px;
    height: 75px;
}

div, span {
    border: 1px solid black;
}

.containingBlock {
    display: table;
    height: 100%;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

.centerCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.topSpan {
    position: absolute;
    top: 0;
}

.bottomSpan {
    bottom: 0;
    right: 0;
    position: absolute;
    right: 0
}​

这里发生的是你有一个相对的包含块，它为绝对定位的跨度提供了背景。 div 占据了整个单元格，但它的内容居中给你同样的效果。