具有空大小和居中溢出内容的Div：不在IE11中居中

Question

我的应用程序显示一些位于绝对位置并用直线连接的小div元素。为了轻松找到div元素的中心，我给它们这些属性：

• 空大小：width: 0px; height: 0px;
• 内容水平和垂直居中的柔性显示类型
• 使用overflow: visible;
显示内容

在Chrome和Firefox中，效果很好。 div是以元素位置为中心的小点，文本符号以div为中心。但是，在Internet Explorer 11中，文本内容不是水平居中的。有没有办法让它在保持大小为零的情况下工作？

以下代码段显示了该问题。在Chrome和Firefox中，绿色div中的文本居中但不在Internet Explorer中。 this jsfiddle中也会显示相同的代码。

＆＃13;

＆＃13;

div#layout
{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  border: solid 1px blue;
}

div#container
{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0px;
  height: 0px;
  overflow: visible;
}

div#content
{
  background-color: green;
  color: white;
}

＆＃13;

<div id="layout">
  <div id="container">
    <div id="content">
      Hello
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;