屏幕尺寸变化时内容能否保持居中？答案

【问题标题】：Can the content remain centered while the screen size changes?屏幕尺寸变化时内容能否保持居中？
【发布时间】：2010-01-31 18:42:09
【问题描述】：

首先，这是我的粗略示例：http://demindu.com/sandbox/simple.html

我正在尝试做的事情：

创建一个内容 div：假设 400 像素高和 700 像素宽，就像示例一样。内容框在每个方向上都有 50px 的边距。无论屏幕分辨率如何，内容 div 都应始终垂直和水平居中。黑色背景应该从居中的内容区域一直延伸到屏幕的右侧，而不是左侧。

我能想到的唯一方法是在 JavaScript 中使用 window.innerWidth 和 window.innerHeight，但我不知道这是否可能。

中间部分上方和下方的空白空间量需要为： window.innerHeight - div 的高度（在本例中：500px [400px 框，两个 50px 边距]）/2

黑条左侧的空白区域需要是： window.innerWidth - div 的宽度（在本例中：800px [700px 框，两个 50px 边距]）/2

我的问题是：这在 JavaScript 中可行吗？使用纯 CSS 是否有可能？

【问题讨论】：

标签： javascript css

【解决方案1】：

您可以使用 4 点绝对定位完全在 CSS 中完成此操作。您将需要两个元素：

第一项从屏幕右侧跨越到内容所在的中心。该元素对元素的顶部、左侧和右侧坐标使用绝对定位（我们可以不指定底部，因为它由高度处理。）
第二项嵌套在前者中。此项目具有固定宽度，以确保内容本身保持在您选择的指定宽度。我们还可以在这个对象上设置高度和填充，父级将继承它的高度。不要使用边距来模拟填充 - 当您像我们这里一样尝试做一些定位技巧时，它可能会导致跨浏览器问题。

所以你的 HTML 代码看起来像这样：

    <div id="my_centered_design">
        <div id="my_centered_design_content">
            <p>This is just some example text.</p>
        </div>
    </div>

你的 CSS 应该是这样的：

    div#my_centered_design {
      background: #000;
      margin-left: -400px;
      margin-top: -250px;
      left: 50%;
      position: absolute;
      right: 0;
      top: 50%;
   }

   div#my_centered_design_content {
      background: #333;
      height: 400px;
      /* I think you actually want padding for 
         the effect you're trying to accomplish */
      padding: 50px;
      width: 700px;
   }

本质上，这与 Joe2Tutorial 的技巧相同，只是我们应用了额外的定位规则以将居中元素附着在屏幕右侧。

【讨论】：

大师级的吉姆，这完全适合我。我不明白的唯一部分是外部 DIV 中需要负边距，但它有效，所以这不是太重要。谢谢！
负边距是实际居中元素位置所必需的。看到您将顶部和左侧设置为 50%。这意味着元素的左上角将正好位于视口的中间。但是，您希望元素的中心，而不是左上角，位于视口的中间。因此，您可以通过使用正好是元素高度和宽度的 1/2 的负边距偏移元素的位置来做到这一点。

【解决方案2】：

我认为这个纯 css 解决方案最适合你：http://www.joe2torials.com/view_tutorial.php?view=37

【讨论】：

这将允许我将某些内容完全居中放置在页面上，但不会考虑背景一直延伸到右侧而不是左侧所产生的偏移量。

【解决方案3】：

一个非常快速的谷歌搜索到了这段代码。

这段代码没有在中间对齐一个 div。你实际上为你自己的网站是你把下面的 div css

.main { 宽度：140 像素；背景颜色：#252525；浮动：左；上边距：25px； }

在居中对齐的表格内。所以，基本上你正在使用表格的居中功能将左浮动 div 简单地作为内容居中。就此而言，您没有通过 div 或 css 做任何事情。您提供的那段 css 代码与将 div 居中放在中间没有任何关系。

【讨论】：