垂直居中全屏div滾動條

-1

我想使全屏，垂直居中div覆蓋下面的所有內容。

/* css */ 
#box { 
    background: #fff; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow-y: auto; 
} 

/* It is <body> tag class */ 
.overlay-hidden { 
    overflow: hidden; 
} 

<!-- html --> 
<body class="overlay-hidden"> 
    <div id="box"> 
     <!-- #box popup content goes here --> 
    </div> 
    <div class="container"> 
     <!-- content goes here --> 
    </div> 
</body>

這裏是我的代碼：https://jsfiddle.net/uzy78s69/ 這似乎工作的偉大，但是當我添加更多的內容，以#box它不能很好地工作https://jsfiddle.net/uzy78s69/1/

點擊X或Create new post檢查行爲。

我做錯了什麼？我該如何解決它？

來源

2016-12-25 Jarmark

已檢查'對齊項：中心;'這部分...當我未選中它工程....我想你想要這樣？ –

**垂直居中全屏**你的意思是？以全寬度內容爲中心的目的是什麼？ –

@dreamhunter通過全屏我已經意味着溢出所有瀏覽器區域'寬度：100％;身高：100％'。 'div'也應該垂直和水平居中。 – Jarmark

只需添加

#box > .container { 
    max-height: 100%; 
}

的jsfiddle：jsfiddle.net/uzy78s69/3

來源

2016-12-25 16:44:06 pol

只需從#box類中刪除display:flex;類。

Example

來源

2016-12-25 16:29:19

垂直居中全屏div滾動條

回答

相關問題