当我们不知道屏幕尺寸时，如何将div的位置设置为居中？

我想在不使用JavaScript的情况下在页面中心设置div的位置;只使用CSS。该div是一种背景图片。当我无法使用JavaScript获取屏幕尺寸时，我应该怎么做？当我们不知道屏幕尺寸时，如何将div的位置设置为居中？

  div.login { 
      position: absolute; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      background-image: url("Images/01.jpg"); 
      width: 500px; 
      height: 270px; 
     }

来源

2011-09-06 Moein Hosseini

这个问题在SO上至少回答了10次...... – feeela

我读了其中的一些答案，但它们不起作用。总是我会搜索，如果我找不到我会问我的stackoverflows朋友 –

“但他们不工作”什么都没有工作？ '.login {width：500px;保证金：0汽车; }' – feeela

这应该给你所有你需要：http://www.wpdfd.com/editorial/thebox/deadcentre3.html

<div id="horizon" style="background-color: transparent; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block"> 
    <div id="content" style="background-color: red; margin-left: -125px; position: absolute; top: -10px; left: 50%; width: 250px; height: 20px; visibility: visible"> 
     <span style="color: white;">This box stays in the absolute center.</span> 
    </div> 
</div>

上面的代码链接的例子的精简版。它创建一个<div>即总是在页面的中心。（垂直和水平方向）

对于维度已知的元素来说，这是一个简单而干净的方法，因为您的问题似乎指的是。

来源

2011-09-06 23:34:01 Unsigned

这是我最喜欢的方法之一，显然适合OP。但是，因为没有提到，所以应该注意，这只有在元素的大小已知时才有效。 – Sparky

这是真的，但是在OP显示的示例代码中，宽度和高度是用文字值显式声明的，因此我认为这适用于OP的情况。尽管如此，好点。 – Unsigned

当我们不知道屏幕尺寸时，如何将div的位置设置为居中？

回答

相关问题