如何在瀏覽器窗口的邊界（垂直和水平）保持居中的div？

Question

我正在努力使圖像和鏈接始終保持在瀏覽器窗口中。這是site。在iPad上加載時，居中內容大於窗口。

我希望它顯示爲​​（顯然沒有黑色邊框）。這可能嗎？

Answer 1

沒有任何額外的標記到中心的元素的訣竅，就是用translate：

div { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

這裏的小提琴：http://jsfiddle.net/QE8KV/

---

附：不要忘記供應商前綴。

Answer 2

Joseph Silber的答案是，如果窗口比內容小，內容就會被切掉。

這時你可以用一招浮動：http://jsfiddle.net/QE8KV/2/

HTML：

<div id="top"></div> 
<div id="center">Text</div> 

CSS：

html,body{ 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#top { 
    float: left; 
    height: 50%; 
    margin-top: -150px; 
    width: 100%; 
} 
#center{ 
    background: #2D285E; 
    box-shadow: 1px 1px 4px #231E5C; 
    color:white; 

    width: 300px; 
    height: 300px; 
    margin:0 auto; 
    clear:both; 
}