Javascript 当容器div离开屏幕一侧时，是否在容器div内动态居中？（水平导航布局）

我有一个水平布局的网站（只包含在divs中的一系列6个草图，不考虑奇怪导航风格的可用性）

为此，我声明了一系列相对定位的div部分，一个接一个，从左到右。在它们中，我有一个包装器div，我计划使用它来方便放置，最后是一个内容div，它保存我的图像/文本

然而，我把自己编入了一个我不知道如何走出的角落

我希望将包装器（以及内容）div水平和垂直居中于各个部分的中心

但我不能这样做，因为我不知道用户的屏幕在扩展或收缩时有多宽

例如： 我的全身是1200像素宽。每个部分的宽度为2000px。每个包装器和内容都包含在其中

• 我不能在我的包装项上声明“空白：0 Auto.”，因为它将把包装放在整个2000 PX宽的部分的中间……李>
• 事实上，如果我的数学没有关闭，它会将它定位在大约500像素

我编写了一个小片段来向您展示问题：

html { height: 100%; }

body{
    height: 100%;
    width: 12000px;
    overflow: hidden; 
}

.section {
    height:  100%;
    background: url("../images/large-swirls.jpg") repeat scroll top right #fff; 
    float: left;
    position: relative;
    width: 2000px; /* I've declared it big enough to see my swirl image */
    z-index: 0 !important;
}

.wrapper {
    /* This is where I should center it horizontally and vertically */
    /* I can't use margin: 0 auto; because the wrapper is in a 2000px container */
}

.content {
    background: #ccc;
    border: 1px solid black;
    margin: 0 auto; /* The content is cleanly centered in my little box */
    width: 1000px;
}


<div class="section" id="sketch1">
    <div class="wrapper">
        <div class="content">
            <p>Hello. I'm one of the sketch sections.</p>
        </div>
    </div>
</div>

html{height:100%；}
身体{
身高：100%；
宽度：12000px；
溢出：隐藏；
}
.科{
身高：100%；
背景：url（“../images/large whirls.jpg”）重复右上滚动35; fff；
浮动：左；
位置：相对位置；
宽度：2000px；/*我已经声明它足够大，可以看到我的漩涡图像*/
z指数：0！重要；
}
.包装纸{
/*这是我应该水平和垂直居中的地方*/
/*我不能使用margin:0 auto；因为包装器在一个2000px的容器中*/
}
.内容{
背景：#ccc；
边框：1px纯黑；
边距：0自动；/*内容在我的小盒子中清晰居中*/
宽度：1000px；
}
你好。我是素描组的一员

基本上，有没有人能建议我如何布局，这样我就可以将内容分区集中在页面右侧的部分？我只是不知道如何为包装器类声明这样的东西

我怀疑答案可能在某种程度上：绝对选择权？（但我不确定，从来没用过那么多）

我也试着在其他水平导航的网站上寻找创意，但它们似乎都将内容向左对齐，然后在侧面添加填充物，例如padding left:500px。。如果你在大屏幕上，那就不好看了。这当然不是我现在的目标

---

有什么好主意吗？=）

有趣的问题。你不会相信我有多少次试图把愚蠢的idv放在页面的中心（水平和垂直）。到目前为止，我提出的最好的解决方案就是使用表。如果我想要一个无论窗口大小如何都始终位于屏幕中间的框，我将创建一个单单元格表格，并使用它的v和h对齐属性（设置为中间）。使用您的站点，您可以将这些部分中的每一部分包装在一个表中，并浮动这些表。这不是最干净的解决方案，但不幸的是，对于我们这些只想把事情放在中心的人来说，除了一些凌乱的javascript之外，几乎没有什么帮助

表格阴影框的快速示例。。。事情：

<table width="100%" height="100%" style="background-color:#ddd" border="0">
  <tbody>
  <tr>
    <td align="middle">
      <div>The Centered Element</div>
    </td>
  </tr>
  </tbody>
</table>

中心元素

约瑟夫，感谢您提议使用表格，这是我没有考虑过的。但它确实感觉有点脏。我会将你的答案标记为答案，除非有人提出一个优雅的替代方案（我没有遇到你提到的JavaScript示例-有没有任何教程可以让我参考？），不过我可以讲述一下中心问题。我已经试过很多次了。我不知道任何具体的教程，但有一个很好的资源是javascriptkit.com。有助于澄清如何获取窗口尺寸。祝你的项目好运！：）