大家好，我有一个页面，里面有一些内容。我需要将整个内容居中，以便在大分辨率下，内容始终位于页面中间。两件事情。首先是，如果分辨率很小，我至少希望内容在到达页面顶部时停止。我试着做 top:50% height:680 margin-top:-340px。问题是，在较小的结果中，内容会飞出页面。我该怎么做呢？导航位于顶部的绝对 div 中，这也必须垂直居中。感谢大家的帮助！
呃
【问题讨论】：
可以仅使用 css 将 <div> 垂直居中于另一个 <div> 中，而无需明确指定高度或负上边距。
以下技术的一个主要缺点是 Internet Explorer { display: table; }。
如果这是您的标记：
<div class="wrapper">
<div class="content">...</div>
</div>
使内部<div>居中的CSS是：
.wrapper { display: table; }
.wrapper .content { display: table-cell; vertical-align: middle; }
这实际上是通过模拟 <table> 元素的原生布局行为来实现的。
【讨论】：
试试这样的：
<figure class='logo'>
<span></span>
<img class='photo'/>
和css：
.logo {
display: block
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }
.logo * {
display: inline-block;
height: 100%
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }
【讨论】：
您可以使用 CSS3 媒体查询为不同尺寸的屏幕分辨率设置不同的尺寸。这仅适用于较新的浏览器，但很容易实现。
您可以做的第二件事是让 javascript 检查屏幕大小并进行相应调整。
【讨论】：
与其制作复杂的样式表或 JavaScript 代码，不如直接找出您的网站可以使用的最低分辨率？屏幕尺寸较小的用户只会看到滚动条：
body {
min-height: 700px;
min-width: 700px;
overflow: auto;
}
这不是一个真正的解决方案，但这就是我会做的。另外，您是否查看过其他种将<div> 垂直居中的方法？我将发布一些方法的链接。
【讨论】：
出于好奇，您为什么使用top 和负边距？ (margin-top: -340px)
那么它只是分辨率大于或接近最大值一半的分辨率（例如 800x600px）吗？
我建议尝试将divs 之一设置为min-height。因此，如果您有一个包装器 div 并将其放入其中，那么应该没问题。
<div id="wrapper">
<div id="centeredDiv" style="position: relative; top50%;>
</div>
</div>
这将强制 <div id="wrapper"></div> 成为 <div id="centeredDiv"></div> 的父 div 并且 position: relative 将使其成为父级 div 被视为开放空间，因此将使用其总高度的 50% .这样做您现在可以使用min-height 强制页面滚动，而不是飞离浏览器顶部。
【讨论】：
top 和否定的margin-top 是一种以固定高度垂直居中内容的方法。当浏览器高度小于680px 时，它会中断，我认为这是 OP 所要求的。
做浮动技巧 - 在内容上方插入一个空 div，将高度设置为 50%，将 margin-bottom 设置为负内容高度（需要固定内容高度）。
<div id="float">
<div id="content">
Content goes here
</div>
</div>
#float{
float:left;
height:50%;
margin-bottom:-200px;
}
#content {
clear:both;
height:200px;
position:relative;
}
【讨论】：