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

Question

我想在不使用JavaScript的情况下将div的位置设置在页面的中心; 仅使用CSS.div是带有背景图片的表单.当我无法使用javascript获取屏幕尺寸时,我该怎么办呢？

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

Answer 1

这应该为您提供所需的一切: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>是始终在页面的正中心.(垂直和水平.)

对于尺寸已知的元素,这是一个简单而干净的方法,正如您的问题似乎是指的那样.