带固定头的垂直居中答案

【问题标题】：Vertical centering with fixed header带固定头的垂直居中
【发布时间】：2013-09-22 11:08:12
【问题描述】：

我有一个带有固定标题的页面。我需要将整个页面垂直居中，以使标题始终固定但整个页面垂直居中。

我不知道如何做到这一点，因为它不仅仅是搞乱负边距和绝对定位（至少我无法找到可行的解决方案......）。我创建了jsFiddle...

系统要我添加一些代码，所以这是您可以在 jsFiddle 中看到的基本结构

<body>
    <div id="header"><h1>HEADER</h1></div>
    <div id="content">
        <p>This is some content.</p>
    </div>
</body>

【问题讨论】：

所以你想让标题在顶部，其余的内容垂直居中？您的声明“这是一些内容。我希望它与固定标题一起垂直居中”令人困惑。
好吧，我改了。除非有足够的内容（即页面有滚动条），否则标题不应位于顶部
您希望content div 位于视口中间吗？或者在header之后的剩余空间的中间？
没关系，我已经为这两种情况发布了解决方案。

标签： html css css-position vertical-alignment fixed

【解决方案1】：

我不确定你想用它做什么.. 这适用于现代浏览器，但不适用于所有浏览器..

问题通常是元素没有固定的高度。我们不知道屏幕高度（以像素为单位），因此高度必须是动态的。较旧的浏览器在填充元素之前不会给元素一定的高度。

http://jsfiddle.net/Mz6hy/25/

在 Chrome、Safari 和 Firefox 中对此进行了测试..

<head>
    <style>
    body
    {
        width           : 100%;
        background      : #fff;
        margin          : 60px 0 -60px 0;
    }
    h1
    {
        text-align      : center;
    }
    #content 
    {
        position        : absolute;
        top             : 50%;
        height          :100px;
        margin-top      :-50px;
    }
    #footer 
    {
        position        :absolute;
        top             :100%;
        height          :50px;
        margin-top      :-50px;
    }
    </style>
</head>
<body>
    <h1>HEADER</h1>
    <div id="content">
        <p>
            This is some content.<br/>
            I want it to be verticaly centered along with the fixed header. The header should always be fixed, but it should be placed in a way that the overall page is verticaly centered.
        </p>
        <p>
            Some more content
        </p>
    </div>
    <div id="footer">Editional content</div>
</body>

【讨论】：

这似乎不起作用。如果我添加更多内容以使页面可滚动，则标题不会固定并且也会滚动...
好的，然后将 h1 的position: fixed 设置为相对于浏览器窗口而不是滚动的主体。如果需要，您也可以使用页脚执行此操作。但内容是什么？这个页面的目的是什么？如果您分享一些细节，也许会有更好的解决方案。例如，您可以使用 Bootstrap 来快速轻松地制作更复杂的布局。

【解决方案2】：

1) 如果您希望内容在页眉后的剩余空间中垂直居中：请参阅Working Fiddle 测试于： IE10、IE9、IE8、Chrome、FF、Safari

2) 如果您希望内容在视口中垂直居中而不考虑标题：请参阅Working Fiddle 测试于： IE10、IE9、IE8、Chrome、FF、Safari

这两个例子的 HTML 标记相同，区别在于 CSS（第二个更简单，但结果更丑）

HTML

<div id="header"><h1>YOUR HEADER</h1></div>
<div id="container"><!-- only that container shall be scrollable -->
    <span class="centerer"></span><!-- this comment is important
    --><div id="content">
        YOUR CONTENT
    </div>
</div>

注意：注释很重要，因为新行被视为inline-blocks 元素之间的空格。这导致输出中的空间间隙。使用注释后，代码仍然可读，但元素之间没有空格。

【讨论】：

【解决方案3】：

现在可以非常简单地使用 flexbox 并在主容器上测量 100vh。

CSS：

height: 100vh;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex-direction: column;
-webkit-flex-direction: column;

查看完整演示：https://jsfiddle.net/f8syhrkv/

【讨论】：