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.
精彩评论