Question

可能重复：
center div vertically in a % height div?

嘿所有，我有一个包含一些内容的页面。我需要将整个内容集中在一起，以便在大分辨率下，内容始终位于页面的中间。两件事情。首先，如果分辨率很小，我至少希望内容在到达页面顶部时停止。我试过做顶：50％高度：680 margin-top：-340px。问题是，在较小的重新组合中，内容会从页面上飞出。我该怎么做呢？导航在顶部的绝对div中，这也必须垂直居中。谢谢你的帮助！

ER

Answer 1

可以仅使用css将<div>垂直居中于另一个<div>内，而无需明确指定高度或负上边距。以下技术的一个主要缺点是Internet Explorer中不支持{ display: table; }＆lt; 9。

如果这是你的标记：

<div class="wrapper">
    <div class="content">...</div>
</div>

使内部<div>居中的CSS是：

.wrapper { display: table; }
.wrapper .content { display: table-cell; vertical-align: middle; }

这主要通过模拟<table>元素的基本布局行为来实现。

Answer 2

尝试这样的事情：

<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%; }

Answer 3

您可以使用CSS3媒体查询为不同大小的屏幕分辨率设置不同的大小。这只适用于较新的浏览器，但易于实现。

你可以做的第二件事就是让javascript检查屏幕尺寸并相应调整。

Answer 4

出于好奇，你为什么使用top和负余量？（margin-top: -340px）

因此，只有340px的分辨率大于或接近最大值的一半（a 800x600px）？

我建议您尝试将其中一个div设置为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强制页面滚动，而不是飞离浏览器的顶部。

Answer 5

为什么不找到您网站使用的最低分辨率，而不是制作复杂的样式表或JavaScript代码？屏幕尺寸较小的用户只会看到滚动条：

body {
  min-height: 700px;
  min-width: 700px;
  overflow: auto;
}

这不是一个真正的解决方案，但这就是我要做的。另外，您是否看过其他方法来垂直居中<div>？我会发布一些方法的链接。

Answer 6

浮动技巧 - 在内容上方插入一个空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;
}

垂直中心Div内容

6 个答案: