我有一个带有固定标题的页面。我需要将整个页面垂直居中，以使标题始终固定但整个页面垂直居中。
我无法弄清楚，它是如何做到的，因为它不仅仅是搞乱负边距和绝对定位（至少我无法找到一个可行的解决方案......）。我创建了jsFiddle ...
系统要我添加一些代码，所以这是您可以在 jsFiddle 中看到的基本结构
<body>
<div id="header"><h1>HEADER</h1></div>
<div id="content">
<p>This is some content.</p>
</div>
</body>
1）如果您希望内容在标题后留下的空间中垂直居中：请参阅Working Fiddle Tested on： IE10、IE9、IE8、Chrome、FF、Safari
2) 如果您希望内容在视口中垂直居中而不考虑标题：请参阅Working Fiddle Tested on: 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 元素之间的空格。这导致输出中的空间间隙。使用注释，代码仍然可读，但元素之间没有空格。
我不确定你想用这个做什么..这适用于现代浏览器，但不适用于所有浏览器..
问题通常是元素没有固定的高度。我们不知道屏幕高度（以像素为单位），因此高度必须是动态的。较旧的浏览器在填充元素之前不会给元素指定高度。
在 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>
现在可以通过 flexbox 和100vh对主容器的测量非常简单地实现这一点。
CSS：
height: 100vh;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex-direction: column;
-webkit-flex-direction: column;