Question

我知道如何使用CSS将整个页面水平居中。但有没有办法垂直居中页面？像这样......

Example

Answer 1

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

Answer 2

您也可以为此目的劫持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的垂直对齐值得一点点滥用;垂直对齐不应该需要黑客，扭曲和绝对尺寸。

参考文献：

垂直居中页面内容

2 个答案: