【发布时间】：2012-09-09 15:10:36
【问题描述】：
几周以来，我正在建立一个新网站。这个网站开始看起来不错，但有一个问题。
当我在比实际网页小的浏览器窗口中查看我的网站时，页面顶部的菜单栏会被切断。我无法上下滚动页面，但顶部无法翻页。
这个问题可能与我用于垂直居中的“居中”代码有关。有没有一种解决方案可以让我的网页居中，但在我使用小窗口后仍然可以到达漏洞页面？
我已经准备好通过使用“视口”元标记来解决 Chrome 移动设备中的问题。 遗憾的是，IE、safari、Chrome 等桌面浏览器在窗口较小时仍然拒绝显示我网页的顶部栏。
这是我网站的链接： test.themissingsticks.com
尝试在全屏窗口（分辨率高于 800 像素高度）中查看，并在低于 600 像素高度的窗口中查看。您会注意到我网站顶部的灰色菜单栏不会显示，即使您尝试向上滚动也是如此。
网站以下面这行 css 为中心：
top: 50%;
margin-top: -340px;
left: 50%;
margin-left: -513px;
页面宽度为1026px，高度为680px。
请帮忙。提前致谢！
【问题讨论】：
-
能否请您添加用于垂直居中网站的代码
-
使用绝对定位和负边距定位页面上所有元素的方式有点疯狂。有更简单的方法可以做到这一点。我建议回归基础，研究有关以网站为中心和一般构建网站的最佳实践。
-
嗨！许多 html/css 差异。您应该在大多数元素上使用相对定位完全重构您的代码。
-
您在对齐中使用了百分比，并结合了负边距。虽然这对模态窗口非常有效，但不建议对齐您的网站。如果我是你，我会专注于使用像 grid960 (960.gs) 或 Twitter Bootstrap (twitter.github.com/bootstrap/scaffolding.html) 这样的系统的脚手架。
-
我将尝试另一种垂直居中页面的方法。我在这里找到了不同方法的概述：blog.themeforest.net/tutorials/vertical-centering-with-css 现在我被“方法 2”的硬币所困扰。我会尝试方法 3，如果它更好，我会告诉你。
标签： html css hide margin center