使DIV停留在中心位置，但調整頁面大小時使用滾動條

Question

我有一個DIV，我需要在頁面中保持居中，即使頁面已重新調整大小。

我目前已經完成了這個頂部：50％;左：50％以及頂部和左邊緣等於DIV的一半dimenstions，像這樣：

.centered { 
    width: 500px; 
    height: 200px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -250px; 
    margin-top: -100px; 
} 

然而，當頁面被製成小於500x200時，div的左側被切斷，並沒有滾動條來查看它的內容。

DEMO

我如何添加一個滾動條，這樣你可以看到所有的DIV的內容嗎？

感謝

Answer 1

因爲你的元素有position : absolute，它被切出離正常的頁面渲染流程，所以沒有辦法增加一個滾動條沒有JavaScript。

Answer 2

你可以簡單地針對特定的寬度和高度 Demo

.centered { 
    width: 500px; 
    height: 200px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -250px; 
    margin-top: -100px; 
    background-color: blue; 
    color: white; 
} 
@media screen and (max-width: 510px) , screen and (max-height:210px) { 
    .centered { 
     position: relative; 
     left: 0; 
     top: 0; 
     margin: 0; 
    } 

回答用戶的CSS媒體查詢已更新

Answer 3

.centered { 
    width: 500px; 
    height: 200px; 
    position: absolute; 
    top:calc(50% - 250px); 
    left:calc(50% - 100px); 
} 

希望這有助於！這個例子確實需要CSS3，所以在Chrome或Safari中使用它可以獲得最佳效果。如果您使用的是LESS編譯器，你必須改變它是：

.centered { 
    width: 500px; 
    height: 200px; 
    position: absolute; 
    top:calc(~"50% - 250px"); 
    left:calc(~"50% - 100px"); 
} 

Answer 4

嘗試%

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.centered { 
 
    width: 500px; 
 
    max-height: 200px; 
 
    height: 40%; 
 
    background-color: blue; 
 
    color: white; 
 
    vertical-align: middle; 
 
    overflow: auto; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    bottom: 50%; 
 
    left: 50%; 
 
}

<div class="centered">This is the div that needs to be centered This is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis 
 
    is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is 
 
    the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the 
 
    div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div 
 
    that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that 
 
    needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs 
 
    to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to 
 
    be centeredThis is the div that needs to be centeredThis is the div that needs to be centered</div>