没有身高或宽度的父母中的中心孩子

我创建了一个弹出式系统，并且我有两个div，分别是popover-container和popover。该容器是一个0px由0px股利，照顾相对于页面的定位。我想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; 
}

所以目前的由来是这样的（圆圈是容器，矩形是实际酥料饼的用户将看到）

我会想要的起源是这样的：

我试过把弯曲中心，边缘居中，没有任何作品。

来源

2016-11-12 Sebastian Olsen

您的代码并不代表你有问题索引图像。您介意在jsfiddle或codepen上发布有关您的问题的工作示例吗？你想弹出悬停弹出吗？它会挂在容器内吗？ – PossessWithin

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

孩子为中心水平使用绝对水平居中的伎俩，那就是：

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

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

来源

2016-11-12 22:23:30 PossessWithin

没有身高或宽度的父母中的中心孩子

回答

相关问题