css centering horizontal and vertical

**manny2k** · 29 July 2007, 10:05 AM

I usually work in flash and it’s pretty straight forward to center the content area (horizontal and vertical) for the browser, so I though I’d have a go and try and workout how to do the same with CSS, bare in mind the following CSS is pretty basic but I think it could have a lot of use for sites that only have minimal content and want the page in the center.

So far as I can gather you could only apply this if you know the width and height of the area or have it at set size, in this case I’ve set this for 800 pixels x 600 pixels

heres the css

Code:

#wrapper {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
#inner{
	background-color:#000000;
	position: absolute;
	height: 600px;
	width: 800px;
	margin-top: -300px;
	top: 50%;
	margin-right: -400px;
	right:50%;	
}

and heres the html the css is imported to

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

<link href="center.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"><div id="inner"></div>
</div>


</body>
</html>

and heres the result

and here it is in use as a landing page for a flash site im currently working on

hope that is of use to someone

Manny2k

**Manwe** · 29 July 2007, 11:34 AM

is this a question of "how to center in css" ?

well, though I'm quite new to the use of css, i think I can do this one:

Code:

#wrapper {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
#inner{
	background-color:#000000;
	position: absolute;
	height: 100%;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}

please correct me if there is anything wrong

**manny2k** · 29 July 2007, 12:02 PM

Manwe I think you misunderstood me mate, the #inner section is where you start to build your page presuming you want a page that is of a fixed width and height of 800 pixels x 600 pixels and wanted it centred in the browser. It wasn’t a question it was a solution for those who want to center a fixed width and height page both horizontal and vertical.

Manny2k

**Manwe** · 29 July 2007, 04:37 PM

Originally Posted by manny2k

Manwe I think you misunderstood me mate, the #inner section is where you start to build your page presuming you want a page that is of a fixed width and height of 800 pixels x 600 pixels and wanted it centred in the browser. It wasn’t a question it was a solution for those who want to center a fixed width and height page both horizontal and vertical.

Manny2k

oh ok...my mistake :P

**juergen** · 30 July 2007, 07:08 AM

Manny2k,

now that looks complicated. You can get the same result here:

#wrapper {

}
#inner{
background-color:#000000;
position: relative;
margin: 50px auto 0 auto;
height: 600px;
width: 800px;

}

It is the margin settings in the inner block element that set the position. They mean: 50px from the top, automatic calculation of right margin, none on the bottom and auto on the left again. The width of the block element is used by the browser to calculate the "auto" values.

There is no need to do anything with the wrapper. Even I did more than needed by defining it. It just needs to be there.

Juergen

**haakoo** · 30 July 2007, 08:04 AM

Hi,
This one is without css.but with use of a single table-cell(so you don't have to calculate)
Example is with an iframe but can be anything

<table width="100%" height="100%" border="0" valign="absmiddle">
<tr>
<td><div align="center">
<div id="J392655973WSE24">
<div class="default-style" id="M392655973DOJ30" style="background-color:#333333;top:0px; left:0px; width:792px; height:432px; padding:0;">
<iframe src="blanko.htm" frameborder="0" marginwidth="0" marginheight="0"
style="top:0; left:0; padding:0; width:100%; height:100%;" name="mainframe"scrolling="no" >
<a href="blanko.htm">index.htm</a></iframe></div></td>
</tr></table>

Hans

**manny2k** · 30 July 2007, 02:52 PM

Haakoo good to know there is more than one way to get things done, good addition to any ones toolbox.

Juergen I’ve changed the css to a 600 x 400 box on your css example and on mine to show you exactly what I mean about dead centre all the time, I think you might have been on a 17 inch monitor when you viewed it so you wouldn’t see what I mean.

Link to my css

Link to your css

resize the browser when veiwing, See the difference ? or have I lost the plot here.

kind regards

Manny2k

**juergen** · 31 July 2007, 08:24 AM

Manny2k,

<<I think you might have been on a 17 inch monitor when you viewed it so you wouldn’t see what I mean.>>

no, I simply don't read well at 7am I fear ) I only saw horizontal center. My example shows the box nailed 50px from the top.

I must admit that from memory I can't tell any solution that centers vertically without requiring to calculate size, so your solution does not look complicated anymore regarded that it centers in the viewport.

Juergen