我遇到了一些我无法解释的CSS陷阱。
有一个位置：隐藏溢出的亲戚，我添加了一个位置为absolute的绝对容器：0。当我在其中添加div.element元素时，容器正确地居中于其父级的右侧。如果我添加更多div，容器会变得更宽（因为我不想将元素包装成新行），并且在某些时候我只能看到最后的n个div（情况＃1）。
然后，我将第一个div替换为单行2个单元格的表格，单元格中包含长文本，这仍然很好（案例＃2）。
最后，我删除了一个单元格的文本（或只设置了一个字符），例如：
<div class="element">
<table><tbody>
<tr>
<td class="received">Child 1 with table c1</td>
<td class="received">a</td>
</tr>
</tbody></table>
</div>
此时，右侧居中消失（情况＃3），好像容器的中间部分与父级的中间部分对齐。此外，还出现了一个滚动条。
我对Firefox 44，IE 9，Chrome 48有相同的行为。 我想这肯定是对CSS流程的误解，但我不明白为什么，我也不知道如何跟踪这类问题。
如果您可以查看并告诉我如何突出显示问题（例如，启动萤火虫，突出显示此元素，查看布局等），它会很棒。 谢谢！
编辑：如果添加到子容器的无包装元素有display：table-cell（case＃4），似乎没问题。这是另一个删除父溢出的jsfiddle：隐藏并添加一个边距，以查看在情况＃3中绿框似乎没有正确居中的情况下发生了什么。事实上，似乎元素已经不在容器流中了。
此外，情况＃3中的问题可以使用min-width而不是width：25px来解决td元素。
它仍然没有解释案例＃2和案例＃3之间的区别。