在没有高度或宽度的父级中居中

Question

我正在创建一个popover系统，我有两个div，popover-container和popover。容器是0px乘0px div，负责相对于页面的定位。我希望popover孩子居中，以便父母在中间。

<div class="popover-overlay">
  <div class="popover-container" style="left: 40px;top: 40px;">
    <div class="popover shadow_card-light"></div>
  </div>
</div>

.popover-overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  pointer-events: none;
}

.popover-container {
  position: absolute;
  width: 0px;
  height: 0px;
}

.popover {
  min-height: 20px;
  min-width: 50px;
  background: white;
  border-radius: 3px;
  overflow: hidden;
  top: 10px;
}

所以目前原点看起来像这样（圆圈是容器，矩形是用户看到的实际弹出窗口）

我想要的是这样的起源：

我尝试过以柔性为中心，边缘居中，没有任何效果。

Answer 1

这是你想要的吗？你的问题有点不清楚，但这里有一些东西。

使用绝对水平居中的技巧水平居中，即：

.element{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
} 

http://codepen.io/diego-fortes/pen/woGeBE