Html 带固定收割台的垂直定心
我有一个固定页眉的页面。我需要整个页面垂直居中的方式，标题总是固定的，但整个页面垂直居中 我不知道该怎么做，因为这不仅仅是摆弄负利润和绝对定位（至少我没能找到一个有效的解决方案…）。我创造了 系统希望我添加一些代码，所以这里是您可以在JSFIDLE中看到的基本结构Html 带固定收割台的垂直定心,html,css,css-position,vertical-alignment,fixed,Html,Css,Css Position,Vertical Alignment,Fixed,我有一个固定页眉的页面。我需要整个页面垂直居中的方式，标题总是固定的，但整个页面垂直居中 我不知道该怎么做，因为这不仅仅是摆弄负利润和绝对定位（至少我没能找到一个有效的解决方案…）。我创造了 系统希望我添加一些代码，所以这里是您可以在JSFIDLE中看到的基本结构 <body> <div id="header"><h1>HEADER</h1></div> <div id="content">
<body>
<div id="header"><h1>HEADER</h1></div>
<div id="content">
<p>This is some content.</p>
</div>
</body>
标题
这是一些内容
<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>
身体
{
宽度：100%；
背景：#fff；
利润率：60px0-60px0；
}
h1
{
文本对齐：居中；
}
#内容
{
位置：绝对位置；
最高：50%；
高度：100px；
利润上限：-50px；
}
#页脚
{
位置：绝对位置；
最高：100%；
高度：50px；
利润上限：-50px；
}
标题
这是一些内容。
我希望它与固定的标题垂直居中。页眉应该总是固定的，但它的放置方式应该使整个页面垂直居中。
更多内容
编辑内容
<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>
身体
{
宽度：100%；
背景：#fff；
利润率：60px0-60px0；
}
h1
{
文本对齐：居中；
}
#内容
{
位置：绝对位置；
最高：50%；
高度：100px；
利润上限：-50px；
}
#页脚
{
位置：绝对位置；
最高：100%；
高度：50px；
利润上限：-50px；
}
标题
这是一些内容。
我希望它与固定的标题垂直居中。页眉应该总是固定的，但它的放置方式应该使整个页面垂直居中。
更多内容
编辑内容
<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>
你的标题
你的内容
内联块<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>
你的标题
你的内容
内联块使用注释后，代码仍然可读，但元素之间没有空格。现在，只需使用flexbox和主容器上的
100vh测量值即可实现这一点
CSS:
height: 100vh;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex-direction: column;
-webkit-flex-direction: column;
请参阅完整演示：现在，使用flexbox和主容器上的100vh测量值可以非常简单地实现这一点
CSS:
height: 100vh;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex-direction: column;
-webkit-flex-direction: column;
请参阅完整演示：那么您希望页眉位于顶部，其余内容垂直居中？你的陈述“这是一些内容。我希望它与固定标题一起垂直居中”令人困惑。好吧，我的错，我改变了这一点。头文件不应该在顶部，除非有足够的内容（即页面有滚动条），您是否希望<代码>内容< /代码> div位于视图端口的中间？还是在页眉之后的剩余空间中间？没关系，我已经发布了两种方案的解决方案。因此，您希望顶部的标题和内容的垂直中心居中？你的陈述“这是一些内容。我希望它与固定标题一起垂直居中”令人困惑。好吧，我的错，我改变了这一点。标题不应位于顶部，除非有足够的内容（即页面有一个滚动条）。是否要内容