沒有身高或寬度的父母中的中心孩子

我創建了一個彈出式系統，並且我有兩個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

沒有身高或寬度的父母中的中心孩子

回答

相關問題