CSS Left 和 Top 在 chrome、firefox 和 IE 中的行为不同

Question

所以我有一个包含两个单元格的表格，我想在一个单元格的中心放置一个元素。它在 Chrome 中按预期工作，但在 IE 或 Firefox 中不起作用。知道为什么会这样吗？我怎样才能让它跨浏览器工作？

似乎在 Firefox 中 left 属性不正确，它不是定位到父块而是定位到整个文档。而在 IE 中，top 属性不起作用。

JSfiddle example

<table style="height:500px;width:500px;table-layout:fixed">
   <tr>
    <td class='div'>
        <span id='divElement'>
      We are launching soon!!!!
        </span>
    </td>
    <td style="background-color:red">
    </td>
   </tr>
</table>
#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

.div{
    position: relative;
    background-color: yellow;
}

更新：

我不使用vertical-align:center 的原因是因为我真正想做的实际上不仅仅是将它放在中心。

所以我有一个元素放置在中心，并希望在该中心元素旁边以固定偏移量放置两个元素，每侧一个。而且我希望即使窗口大小发生变化也能修复偏移量。 （表格将占用 100% 的窗口，每个 td 占用 50%，因此当窗口大小发生变化时，td 大小也会发生变化）

我想出的方法是使用绝对定位，先将两个元素放在中心，然后使用边距将它们推到居中元素的[width/2 + fixOffset]

也许有更好的方法来做到这一点？

New JSFiddle example

Answer 1

请看问题：Using Position Relative/Absolute within a TD?

基本上这是因为position: relative 在表格单元格元素（td 或任何display: table-cell）上具有未定义的行为，这意味着每个浏览器都按照自己的意愿实现它，没有规则。

因此在某些情况下它可能有效（参见 chrome），但在其他情况下则不行。

我自己也解决了同样的问题。最后使用了 div，因为我真的需要相对于容器定位的子元素，在它之外。

如果您只需要使内容居中，请使用vertical-align: middle 而不是position: absolute - top: 50% - margin-top: -somepx 组合

查看编辑fiddle

Answer 2

为什么，哦，为什么你会为此使用绝对定位吗……？

您已经在一个表格单元格中——text-align 和 vertical-align 非常适合居中内联内容：

.div{
    background-color: yellow;
    text-align:center;
    vertical-align:middle;
}

#divElement{
    display:inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}

http://jsfiddle.net/828YG/3/