Centering a Div in the middle of a page?

**Joe3000** · 03-06-2007, 05:31 PM

Since the HEIGHT tag doesnt work anymore I am struggling to center a div in the middle of the browser.

I have got this far:
Style:

body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#outer {
position:absolute;
left:0;
top:0;
padding:0;
width:100%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:0px solid #333;
}
#inner {
left:0;
top:0;
padding:0;
width:50%;
height:50%; /* works only if parent container is assigned a height value */
color:#cccccc;
background:#cccccc;
border:0px solid #333;
margin:0 auto;
text-align:center;
}

HTML:

<body>

<div id="outer">

<div id="inner">
</div>

</div>

But its not working.

Any ideas?

**LadynRed** · 03-06-2007, 06:14 PM

Don't use position: absolute, it's not necessary.

Height DOES work.... just not in IE.

To center horizontally:
Give your 'outer' a defined width, and then give it margin: 0 auto . That will center in all browsers except IE 6 and below.
To make IE behave, add "text-align: center" to the body rules.

To center vertically.. not as easy, but not impossible. Try the 'shiv div' method: http://exanimo.com/css/vertical-cent...a-floated-shim

**ptrok** · 03-08-2007, 07:45 AM

Probabaly the same thing as suggested above but - I found the following CSS worked well for me on a design a while back so long as the content wasn't too big for 50% height of resized window .. then it starts to break.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<titleVertical Centre Using Absolute Positioning</title>
<style type="text/css" media="screen">
 <!--
body {
 height: 100%;
 padding: 0;
 margin: 0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
} 
#centered {
 position: absolute;
 top: 25%;
 left: 25%;
 width: 50%;
 height: 50%;
 background-color: #CCCCCC;
 padding: 5px;
} 
-->
</style>
</head>
<body>
<div id="centered"> 
  <p>Always look on the bright side of life ... whistle whistle ... etc etc .... this works IE, NS, Opera, FF but breaks when centred content is longer than 50% of the window </p>
</div>
</body>
</html>

My 2 cents worth ...

**LadynRed** · 03-08-2007, 02:44 PM

Of course it's going to break, you've got position:absolute in there.

**seowebdesigner** · 03-10-2007, 02:34 PM

;
margin-right

;
height: auto;

</style>
</head>
<body>
<div id="maincontainer">

</div>

Try this.

**Joe3000** · 03-18-2007, 02:31 PM

Quote:

Originally Posted by ptrok

Probabaly the same thing as suggested above but - I found the following CSS worked well for me on a design a while back so long as the content wasn't too big for 50% height of resized window .. then it starts to break.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<titleVertical Centre Using Absolute Positioning</title>
<style type="text/css" media="screen">
 <!--
body {
 height: 100%;
 padding: 0;
 margin: 0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
} 
#centered {
 position: absolute;
 top: 25%;
 left: 25%;
 width: 50%;
 height: 50%;
 background-color: #CCCCCC;
 padding: 5px;
} 
-->
</style>
</head>
<body>
<div id="centered"> 
  <p>Always look on the bright side of life ... whistle whistle ... etc etc .... this works IE, NS, Opera, FF but breaks when centred content is longer than 50% of the window </p>
</div>
</body>
</html>

My 2 cents worth ...

Thanks.

Shame it doesnt work over 50% in FF.

**Joe3000** · 03-18-2007, 02:32 PM

Quote:

Originally Posted by seowebdesigner

;
margin-right

;
height: auto;

</style>
</head>
<body>
<div id="maincontainer">

</div>

Try this.

No joy.

**Joe3000** · 03-19-2007, 06:13 AM

This seems to do it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Hor & Vert Center</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style title="Default" media="screen" type="text/css">
#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}
</style>
</head>
<body>

<div id="center">
Your centered box.
</div>

</body>
</html>

**Joe3000** · 04-06-2007, 05:15 AM

Any ideas why this isnt working, I want 'wrapper' to be centered horizontally (which it is) but also its height to be 100% which it isnt:

body {
text-align: center;
min-width: 724px;
height: 100%;
}
#wrapper {
height: 100%;
margin:0 auto;
width:724px;
text-align: left;
background-repeat: repeat-y;
background-color: #FccFFF;
background-image: url(images/bg.jpg);
}

Thanks.

**LadynRed** · 04-06-2007, 03:37 PM

Quote:

Any time you declare a percentage dimension on an element, make sure it's parent element has a dimension set on it as well so that the child will have something to base its percentage dimension off of.

To make a full viewport height layout with multiple columns, use the following CSS for all browsers:

html, body{
height: 100%;}

#container{ /*div you want to stretch */
min-height: 100%;}

Feed IE 6 the height rule:

#container{
height: 100%;}

From CommunityMX by Zoe Gillenwater

**Joe3000** · 04-07-2007, 06:32 AM

I tried that to no avail:

body {
text-align: center;
min-width: 724px;
height: 100%;
}
#wrapper {
min-height: 100%;
margin:0 auto;
width:724px;
text-align: left;
background-repeat: repeat-y;
background-color: #FccFFF;
background-image: url(images/bg.jpg);
}

**LadynRed** · 04-07-2007, 03:21 PM

It appears you did not include the height: 100% on #container to make IE behave.