CSS中粘性页脚上方的水平和垂直居中

Posted

技术标签:

【中文标题】CSS中粘性页脚上方的水平和垂直居中【英文标题】:Horizontal and vertical centering above a sticky footer in CSS 【发布时间】:2011-12-16 02:41:42 【问题描述】:

考虑到像 Ryan Fait 网站上具有固定像素高度的粘性页脚,是否可以在此页脚上方的空间中水平和垂直居中可变大小的内容?

【问题讨论】:

请提供更多信息?该示例的链接会很好。如果这个页面是你想要的,检查那里的代码。我不确定它是否是粘性页脚而不仅仅是页脚,为什么要垂直居中页脚?还是您要居中的页脚上方的内容? 我的意思是页脚在这里:ryanfait.com/sticky-footer 他在页脚上方水平居中页面,但不是垂直居中。我基本上想在页面顶部和页脚之间添加垂直居中。 ..所以你有一个包含所有内容的包装 div,包括页脚。然后你有一个 div 包含你想要垂直居中的任何内容,减去页脚。是这个意思吗? 没有可变大小内容的答案? 【参考方案1】:

我建议查看Bobby van der Sluis's article on Footers at A List Apart

Example #7 在他的文章末尾显示了一个垂直居中的块。它确实依赖于脚本,但它确实是最小的。

edit 也可以使用单格表格实现垂直居中。将它与 Ryan Fait 的粘性页脚结合起来会得到这样的结果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">        

    /* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */

    html, body 
        margin: 0;
        height: 100%;
        width: 100%;
        

    #footer 
        margin-top: -150px;
        height: 150px;
        

    #footer 
        background: #bbd;
        

    .block 
        width: 300px;
        padding: 20px;
        background: yellow;
        margin: 0 auto 150px; /* height of #footer */
        

</style>
</head>
<body>

<table   border="0" cellpadding="0" cellspacing="0">

    <tr><td>

        <div class="block">
            <h1>Vertically Centered!</h1>
            <p>This block will remain centered. Just needs that one table cell wrapping.</p>
        </div>

    </td></tr>
</table>

<div id="footer">Footer Content here</div>

</body>
</html>

【讨论】:

我总是觉得使用桌子很脏,但我想这就是这样的事情。谢谢! :)【参考方案2】:

好吧,那么您可以将其设置为内容的垂直对齐:

.verticalalign
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;

【讨论】:

问题是我不会知道内容的大小来指定这样的绝对值,因此问题。

以上是关于CSS中粘性页脚上方的水平和垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

如何使文字在div中水平和垂直居中的css代码

怎么使用CSS让图片水平垂直都居中?

CSS实现垂直居中的7种方法

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

如何让DIV里面的DIV水平垂直居中

CSS水平居中+垂直居中+水平/垂直居中的方法总结