垂直居中頁面內容

我知道如何用CSS水平居中整個頁面。但是有沒有辦法讓頁面垂直居中？事情是這樣的......垂直居中頁面內容

Example

2011-03-12 Pieter

我希望它能幫助你http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ –

偉大的文章...'.className {width：300px;高度：200像素;位置：絕對的;左：50％;頂部：50％; margin：-100px 0 0 -150px; }'爲我做了。你可以發表這個作爲我的問題的答案，以便我可以接受嗎？ – Pieter

有一個在MicroTut一個偉大的文章做http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

與CSS定心：

.className{ 
    width:300px; 
    height:200px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-100px 0 0 -150px; 
}

使用jQuery定心：

$(window).resize(function(){ 

    $('.className').css({ 
     position:'absolute', 
     left: ($(window).width() - $('.className').outerWidth())/2, 
     top: ($(window).height() - $('.className').outerHeight())/2 
    }); 

}); 

// To initially run the function: 
$(window).resize();

而且你可以看到一個演示here

來源

2011-03-12 13:40:50

您還可以劫持CSS的display: table和display: table-cell用於這一目的。該HTML會是這樣：

<body> 
    <div id="body"> 
     <!-- Content goes here --> 
    </div> 
</body>

而CSS：

html, 
body { 
    width: 100%; 
    height: 100%; 
} 
html { 
    display: table; 
} 
body { 
    display: table-cell; 
    vertical-align: middle; 
}

如果你想水平居中爲好，再補充一點：

#body { 
    max-width: 1000px; /* Or whatever makes sense for you. */ 
    margin: 0 auto; 
}

有人會稱之爲濫用的CSS，但：

它會工作完全一樣幾乎到處都是。
需要最小的標記和樣式。
而CSS的垂直對齊值得一點濫用;垂直對齊不應該要求黑客，扭曲和絕對尺寸。

參考文獻：

來源

2011-03-12 21:38:39

垂直居中頁面內容

回答

相關問題