在浏览器中居中一页水平滚动网站（不居中div）

Question

当浏览器打开我的页面时，浏览器应该已经位于整个页面的中心。

含义：我有一个水平的单页面，而不是从左边开始并且向右边（例如this），将从中间开始，并且能够滚动到右侧和右侧的内容左边。

这里是一个可视化：

如果可能的话，我想，以避免通过JavaScript或jQuery的DOM就绪滚动（我用它来导航设备和东西反正），和只使用纯html5/css，或者至少通过JavaScript/jQuery调整屏幕准备就绪。

我的两个想法：

a）将容器移动到左边，例如，使用margin-left:-x，但通常会将其切断。

b）从一开始就将屏幕向右移动。

唉，我一直不太明白要自己做到这一点。

p.s.这里我的jsfiddle的一致性：http://jsfiddle.net/alexdot/2Dse3/

Answer 1

解决方案
如果你想隐藏的数据，新增visibility:hidden;与应保持隐藏在开始内容的元素。执行我的页面滚动代码，最后将visibility:hidden;更改为visibility:visible。

会发生什么？

1. CSS隐藏了这些元素的内容：visibility:hidden
2. 页面加载
3. 的JavaScript导致页面滚动到中心：window.scrollTo(..., ...)
4. 的JavaScript显示机密内容（浏览器的视野之外）：visibility=visible
5. 用户滚动到左/右，并且能够读取秘密

小提琴：http://jsfiddle.net/2Dse3/5/

---

滚动码
滚动页面的中心不能用纯CSS/HTML来实现。这只能通过使用JavaScript来完成。为了这个简单的目的，我宁愿使用本地JavaScript而不是包含JQuery插件（不必要的服务器负载）。

JavaScript代码：

window.scrollTo(
    (document.body.offsetWidth -document.documentElement.offsetWidth)/2, 
    (document.body.offsetHeight-document.documentElement.offsetHeight)/2 
); 
/* 
* window.scrollTo(x,y) is an efficient cross-broser function, 
* which scrolls the document to position X, Y 
* document.body.offsetWidth contains the value of the body's width 
* document.documentElement contains the value of the document's width 
* 
* Logic: If you want to center the page, you have to substract 
* the body's width from the document's width, then divide it 
* by 2. 
*/ 

你必须调整CSS（见Fiddle）：

body {width: 500%} 
#viewContainer {width: 100%} 

最后要注意的。当用户禁用JavaScript时你期望什么？他们是否被允许查看网页的内容？如果是，请加上：

<noscript> 
    <style> 
    .page{ 
     visibility: visible; 
    } 
    </style> 
</noscript> 

否则，请加<noscript>JavaScript is required to read this page</noscript>。

Answer 2

什么是DOM准备好了吗？

​​

I'm pretty sure it can't be done with CSS alone.

Answer 3

一个简单的jQuery解决方案

$(function() { 
    scrollTo(($(document).width() - $(window).width())/2, 0); 
});