垂直中心Div内容

Question

可能重复:
中心div在%高度div中垂直？

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

呃

Answer 1

只使用css并且没有明确指定高度或负上边距,可以<div>在另一个内部垂直居中<div>.以下技术的一个主要缺点{ display: table; }是Internet Explorer <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

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

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