如何居中DIV的同時隱藏它的滾動條？

Question

我正在嘗試將DIV元素的內容居中，該元素的滾動條隱藏在父級後面。看起來是這樣的：

http://jsfiddle.net/Zeyar/

HTML：

<div class="parent"> 
    <div class="child"> 
     <div class="content"> 
      This should be centered! This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered! 
     </div> 
    </div> 
</div> 

CSS：

.parent { 
    width: 300px; /* unknown width - 100%* - browser size */ 
    height: 200px; /* unknown width - 100%* - broser size */ 
    overflow: hidden; 
    background: #dedede; 
} 
.child { 
    width: 120%; 
    height: 100%; 
    overflow-y: scroll; 
    background: #000; 
} 
.content { 
    width: 150px; 
    margin: 0 auto; 
    background: #fff; 
} 

我已經嘗試了各種東西，但似乎沒有任何工作。

我想完成這個跨瀏覽器，如果用戶重新調整窗口大小仍然工作。我的問題是不同瀏覽器中的滾動條寬度變化爲，並且屏幕寬度也未知。

Answer 1

這是一種可以在所有瀏覽器中工作的方法。

修改你的CSS如下：

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.parent { 
    height: 100%; /* unknown width - 100%* - browser size */ 
    overflow: hidden; 
    background: #dedede; 
} 
.child { 
    width: 120%; 
    height: 100%; 
    overflow-y: scroll; 
    background: #000; 
    position: relative; 
} 
.content { 
    background: #fff; 
    width: 150px; 
    position: absolute; 
    left: 45%; 
    margin-left: -75px; 
} 

的.child塊上設置position: relative，然後.content塊上使用position: absolute。

爲了使中心位置正常工作，請使用left: 45%，然後使用margin-left: -75px將.content向左移。

45％的價值是基於一點點的試驗和錯誤。

限制

如果縮小窗口寬度足夠小，你會看到.content周圍的左，右間距是不太對稱的（2-3像素關閉）。

如果窗口足夠高，內容將無法到達屏幕底部，因此它不是垂直居中。

瀏覽器支持& Safari的怪癖 我試着用Safari瀏覽器的解決方案在Windows和垂直滾動不使用鼠標滾動工作。但是，該解決方案適用於FF，IE，Chrome，Opera（最新版本）。

演示提琴：http://jsfiddle.net/audetwebdesign/q3bKz/

Answer 2

看着你的jsfiddle後，我發現它不是居中的原因。您將寬度設置爲120％，如果將其更改爲100％，則會將子div設爲中心。但是，在這樣做的時候，它會帶回滾動條。儘管如此，我正在努力。

更新

我知道你已經接受一個答案，但如果你不想使用JavaScript/jQuery的，只是使用普通的CSS，那麼你也可以嘗試在CSS中使用該

.content { 
    width: 150px; 
    margin: 0 auto; 
    background: #fff; 
    -webkit-transform: translate(-20%, -20%); 
    -moz-transform: translate(-20%, -20%); 
    -ms-transform: translate(-20%, -20%); 
    transform: translate(-20%, -20%); 
}