How to place some html element, say div, in a middle of a browser window (not page, not screen)? Not depend on browser window size, screen resolution, toolbar layout, etc. E.g. I want it to be in the middle of the browser window.
Thanks
A:
I don't think you can do that. You can be in the middle of the document, however you don't know the toolbar layout or the size of the browser controls. Thus you can center in the document, but not in the middle of the browser window.
Pim Jager
2009-06-11 16:14:49
This isn't true. This example even works for browser resizes: http://www.wpdfd.com/editorial/thebox/deadcentre3.html
Cuga
2009-06-11 16:26:02
Yes, but still relative to the document (which resizes as the browser window is resizes). However when you open this in Firefox and Chrome ans you maximize them both. You will see that the text is on a different place becease Chrome's document is bigger, even though the browser windows are the same size.
Pim Jager
2009-06-11 16:33:58
+3
A:
To do this you need to know the size of the element you are centering. Any measurement will do (i.e. px, em, percent), but it has to have a fixed size.
The css will look as follows:
// Replace X and Y with a number and u with a unit. do calculations
// and remove parens
.centered_div {
width: Xu;
height: Yu;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)u;
margin-top: -(Y/2)u;
}
Edit: This centers in the viewport. You can only center in the browser window using JavaScript. But that might be good enough anyway, since you probably want to display a popup/modal box?
PatrikAkerstrand
2009-06-11 16:15:46
A:
If I understand you correct, you want to center the element vertically and horizontally based on the window, not the document. It can be a bit of a pain, but you can use javascript to detect the window size, scroll position, element size, etc. and then position the element in the center of the window (not the document, but the viewable window).
If you want this element to remain in the moddule of the window as you scroll you would need to capture the scroll event and adjust the position.
The code for doing this differs from one browser to the next.
James Conigliaro
2009-06-11 16:19:46
I tried to solve this by javascript, but was unable to get viewable window coords. I don't think it's possible to calculate them, even for one of browsers.
Kamarey
2009-06-11 16:29:23
A:
To centre align a div you should apply the style
div
{
margin: 0 auto;
}
gonzohunter
2009-06-11 16:20:39
+2
A:
This is completely possible with just CSS-- no JavaScript needed: Here's an example
Here is the source code behind that example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
--></style>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!</div>
</div>
</div>
<div id="footer">
<a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
Cuga
2009-06-11 16:24:41
A:
You could write a JavaScript wto find the window height and width and make it to half to find the centre point.
Add you stuff inside a tag, and set the div top and left from the javascript to the centre coordinates you have found using Javascript.
Let me know if you need the code.
Bhaskar
2009-06-11 16:25:40
A:
This is checked and works in all browsers.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%; width: 100%; text-align: center;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; text-align: left;}
#inner {margin-left: auto; margin-right: auto;}
#inner {width: 300px; } /* this width should be the width of the box you want centered */
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
centered
</div>
</div>
</div>
</body>
</html>
Michal M
2009-06-11 16:31:11
if body's height isn't 100%, but say 3000px, you will see that text is in at a middle of a document, e.g. you should scroll down to see it.
Kamarey
2009-06-11 16:40:31
A:
Hope this helps. Trick is to use absolute positioning and configure the top and left columns. Of course "dead center" will depend on the size of the object/div you are embedding, so you will need to do some work. For a login window I used the following - it also has some safety with max-width and max-height that may actually be of use to you in your example. Configure the values below to your requirement.
div#wrapper {
border: 0;
width: 65%;
text-align: left;
position: absolute;
top: 20%;
left: 18%;
height: 50%;
min-width: 600px;
max-width: 800px;
}
Ryan Oberoi
2009-06-11 16:37:20