Tweet
How can I position a <div> so that it is in the center of the page, whatever monitor size/resolution?
-
-
eg.
PHP Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body { width: 100%; height: 100%; }
#centre {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 70px;
margin-top: -35px;
margin-left: -100px;
background-color: #f00;
text-align: center;
}
</style>
</head>
<body>
<div id="centre">
</div>
</body>
</html>
-
thanksComment
-
That works fine untill you changw the size of the divOriginally posted by mark87Comment
-
Hmm yup, because you see it has -
width: 200px;
height: 70px;
margin-top: -35px;
margin-left: -100px;
Well basically the top margin needs to be minus half of the height, and the left margin needs to be minus half of the width.
So if you have a 300x400px div say, you'd have this -
width: 300px;
height: 400px;
margin-top: -200px;
margin-left: -150px;Comment
-
oh, thanks. I really shouldve thought bout it
Comment
Comment