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;
        }

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>。（垂直和水平。）

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

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

1 个答案: