开发者

How do you set a div's location to be centered when we don't know the screen size?

I want to set the position of a div at the center of the page without using JavaScript; using only CSS. The div is a form with a background picture. How shou开发者_如何学JAVAld I do it when I can't use javascript to get screen size?

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


This should give you all you need: 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>

The above code is a stripped down version of the linked example. It creates a <div> that is always in the exact center of the page. (Both vertically and horizontally.)

It's a simple and clean method for elements who's dimensions are known, as your question seems to be referring to.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜