Центр ребенка внутри родителя, который не имеет высоты или ширины

Question

Я создаю систему popover, и у меня есть два divs: 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