垂直居中内容 [英] Vertically Center Div Content

问题描述

可能重复：

center div in a height height div？

嘿，我有一个页面，其中有一些内容。我需要把整个东西的中心，使得在大分辨率，内容总是在页面的中间。两件事情。首先是，如果分辨率很小，我想至少内容停止时，它到达页面的顶部。我试过做顶：50％高度：680 margin-top：-340px。问题是，在较小的resoultion内容飞离页面。我该怎么做？导航在顶部的绝对div，这也必须垂直居中。感谢您的帮助！

Hey all, i have a page with some content in it. I need to center the whole thing so that in large resolutions, the content is always in the middle of the page. Two things. first is, if the resolution is small, i want at the very least the content to stop when it gets to the top of the page. I tried doing top:50% height: 680 margin-top:-340px. The problem is that in a smaller resoultion the content goes flying off the page. How do i do this? The nav is in an absolute div at the top, this too has to be centered vertically. Thanks for your help all!

er

推荐答案

在另一个< div> 中只使用css而不明确指定高度或垂直中心a < div> 负顶部。
以下技术的一个主要缺点是 {display：table; } 在Internet Explorer中不受支持< 9。

It's possible to vertically center a <div> within another <div> using only css and without explicitly specifying a height or a negative top margin. The one major drawback of the following technique is that { display: table; } is NOT supported in Internet Explorer < 9.

如果这是您的标记：

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

CSS获取内部< div> 要居中的是：

The CSS to get the inner <div> to be centered is:

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

这通过基本上模拟< table& 元素。

This works by essentially emulating the naitive layout behavior of <table> elements.

这篇关于垂直居中内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！