滾動條，不能擺脫它

Question

使用引導3.0.3，我試圖用一個硬編碼的寬度和高度居中水平和垂直一個div。 JSFiddle中包含最新的代碼，這裏也報道與SO有關JSFiddle的規則相一致。

http://jsfiddle.net/alex_kurilin/pNYg9/

的HTML：

<div class="text-center full-height"> 
    <div class="inline full-height"> 
     <div class="fake-table full-height"> 
      <div class="fake-table-cell full-height"> 
       <div class="content fake-table"> 
        <div class="fake-table-cell">foobar</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

的CSS：

html, body { 
    height: 100%; 
} 

.fake-table { 
    display: table; 
} 
.fake-table-cell { 
    display: table-cell; 
    vertical-align: middle; 
} 
.inline { 
    display: inline-block; 
} 
.text-center { 
    text-align: center; 
} 
.full-height { 
    height: 100%; 
} 
.content { 
    background-color: grey; 
    width: 300px; 
    height: 150px; 
} 

什麼我展示在的jsfiddle出現 「工作」，但是出於某種原因它增加一個垂直滾動條。有趣的是，改變身體的font-size，font-family和line-height似乎影響滾動條，因此我想這事做與height: 100%和inline-block股利。

我很想就如何使這個特定的排列正確發生，因爲我懷疑我這樣做了艱辛的道路上兩個指針。

Answer 1

爲什麼不直接使用的內容元素，並刪除其他：

.content { 
    background-color: grey; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -150px; 
    margin-top: -75px; 
    width: 300px; 
    height: 150px; 
}