屏幕尺寸變化時，內容是否可以保持居中？

首先，這裏是我的粗略例如：http://demindu.com/sandbox/simple.html 屏幕尺寸變化時，內容是否可以保持居中？

我想要做的事：

創建內容的div：假設400像素和700像素寬，像例子。內容框在每個方向上的邊距都爲50px。無論屏幕分辨率如何，內容div都應始終垂直和水平居中。黑色背景應該從居中的內容區域一直延伸到屏幕的右側，而不是左側。

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

的上方和下方的中間部分空白的空間量將需要： window.innerHeight - 的div高度（在這個例子中：500px的[400像素箱具有兩個50像素邊緣]）/ 2

的坯件空間的黑色欄左側將需要： window.innerWidth - 股利的寬度（在這個例子中：800像素[700像素盒有兩個50像素的利潤）/ 2

我對你的問題是：這是可能在JavaScript中？這可能以某種方式與純粹的CSS？

來源

2010-01-31 Anders H

您可以完全在CSS中使用4點絕對定位。您將需要兩個元素：

第一項從屏幕右側跨越到內容所在的中心。此元素對元素的頂部，左側和右側座標使用絕對定位（由於高度處理，我們可以留下未指定底部）。
第二項嵌套在前者中。此項目具有固定寬度，以確保內容本身保持您選擇的指定寬度。我們也可以在這個對象上設置高度和填充，父母會繼承它的高度。不要使用邊距來模擬填充 - 當您只是嘗試像我們這樣做一些定位技巧時，它可能會導致跨瀏覽器問題。

所以，你的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除了我們正在應用其他定位規則來將居中元素粘貼到屏幕的右側。

來源

2010-01-31 10:42:09

高手吉姆，這完全適合我。我不明白的唯一部分是需要外部DIV的負邊距，但它起作用，所以這不是太重要。謝謝！ – 2010-01-31 16:55:06

實際居中元素的位置需要負邊距。看到你正在設置最高點並將其左側設置爲50％。這意味着元素的左上角恰好位於視口的中間。但是，您希望元素的中心而不是左上角位於視口的中間位置。所以你通過偏移元素的位置來做到這一點，即負邊距是元素高度和寬度的1/2。 – 2010-02-01 05:46:17