Position an Element in the Middle of a Screen
Remember I'm in Developer Heaven creating an IE-only application to run in Kiosk mode at 1024*768px? Well, all was going smoothly until the client threw a spanner in the works and made a request: on screens larger than 1024x768 the whole thing should be centered, both horizontally and vertically.
At first I thought this was going to be a real pain, but it proved fairly simple. Things like this might sound like they should be easy but they rarely are with CSS.
The starting point for the code I used is this page. There are two examples - the CSS2 way, which doesn't work in IE, and the other way which "sort-of" works in IE. Here's the IE "hack":
#centered {position: absolute;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
The idea is to move the box half way across and down the screen. Then move it back in both directions by a half again. The result is a space round the box of a ¼ of the screen size. This assumes your box is half the screen width and height though, which mine isn't.
The IE way didn't work for me at all, so I had to rethink it. After a while it dawned on me how simple it was. Because I know the exact dimensions of my box I can move it back by half of that size in both directions, like so:
#centered{position: absolute;
top: 50%;
left: 50%;
width:1024px;
height: 768px;
margin-left:-512px;
margin-top:-384px;
}
Simple isn't it. Move the top left corner to the centre of the screen and then move it up and to the left by half of the height and width respectively. The result being that the centre of the layer is then at the centre of the screen. On a 1024x768 screen it still works and just appears normal. On all other screens it's in the exact centre. In most/all browsers. You can see an example page* here.
This method works with any fixed-size element you might want to position in the exact centre of the screen. Hope you find it useful.
* On a 1024x768 screen this demo page will only work in Kiosk mode. Obviously we need to take in to account scrollbars, taskbar, menubar and other bits. In reality it's hard to have a fixed size element the same size as the actual browser's content area.
Skip to the 
You can subscribe to an individual
This is off the top of my head - so maybe totally wrong ;)
How about just put a wrapper div around the lot with text-align:center as the style info.
Then just make sure you set internal divs to the wrapper have text-align:left where you need.
I agree with Steve about using the text-align code - I dislike using the positional code. But this doesn't solve the problem of aligning the box vertically ... I don't know enough of css to do so.
However, there is another option (if you're a CSS purist, please look the other way :-P ) - use a table with a single cell. Define the table as follows:
align="center"
width="1024"
height="99%"
By default the content inside a cell would be vertically aligned ...
Yeah, vertical positioning requires CSS, unless you use a table with one cell. I tell you what. I am often really tempted to hack some tables in to make life simple.
Tables do make it simpler. I managed cross browser horizantal centering that works all the way back to IE 5.0. Didn't want or need the vertical though.
{Link}
It uses CSS and tables and some CSS hacking for the IE compatibility. I think the oricinal technique came from A List Apart.
Try following:
body { text-align: center; }
#mybox {
margin-left: auto;
margin-right: auto;
}
With IE5.5 and IE 6 this will horizontal center the mybox-div. IE accepts a box as text-element. Vertical-align does not work, because it places the box within a line of text and not within the parent element.
Maybe there is a workaround with javascript 'print' by calculating the screen-height. Just guess the " top: ..px" and print it as style into the div-tag.
This works for me:
body{
height: 100%;
width: 100%;
}
.centered {
position: absolute;
left:25%;
top:25%;
width: 50%;
height: 50%;
margin: auto;
background-color: red;
color: white;
}
Love your work - you saved me a major headache, thanks!
I created a simple version for dotnet just adding This to my div tag.. just adjust the left and top % to allow your box to center up... pretty simple. Make sure to add runat server so you can call the tag from your code behind.
<div id="divTag" style="position:absolute; left:38%; top:33%;" runat="server">
Another way... Works fine
#maincontainer{
margin: 0 auto; /*Center container on page*/
}
The problem here is that you are centering relative to the PAGE not the WINDOW. If there is more content on the page and you scroll down a bit the rectangle is no longer vertically centered in view. In a situation where the user may have scrolled down the page and you want to let them click or hover on something and make a centered box appear, you have to figure out what page position now represents the window's (0,0) position and position the box relative to that.