Align a div at the center of screen for all resolution

Discussion in 'CSS' started by daringtakers, Jul 12, 2007.

0
  1. #1
    Hi.. all

    I want to align a div at the center of the screen (both verticle n horizontal). for all resolution

    any idea?

    thnx
     
    daringtakers, Jul 12, 2007 IP
  2. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    #div {
    margin: auto;
    }
    for horizontal, i dont know any good way to do same for vertical
     
    deques, Jul 13, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Well, there's no 'easy' way, and they all involve using other containers.

    You can do it with JUST DIV's if you know the height of the div you want centered.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Centered DIV - DIV only</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

body, html {
	height:100%;
	text-align:center; /* center the box in IE 5.x */
}

.toppad {
	height:50%;
}

.halfway {
	width:320px;
	height:200px;
	background:#CCC;
	margin:-100px auto 0;
}
</style>

</head><body>
<div class="toppad"></div>
<div class="halfway">Should be centered</div>

</body></html>
    Code (markup):

    That will work in IE 5.5, 6 & 7, Opera, FF and Safari. I make no guarantees as to how IE 5.2 mac will mangle that.

    The OTHER technique is a lot less popular these days, but is guaranteed to work EVERYWHERE. Wrap the whole thing in a table.

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Centered DIV - Table</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

body, html {
	height:100%;
}

.center_it {
	border-collapse:collapse;
	width:100%;
	height:100%;
}

.center_it td {
	text-align:center; /* for IE 5.x */
	vertical-align:center;
}

.halfway {
	width:320px;
	height:200px;
	background:#CCC;
	margin:0 auto;
}

</style>

</head><body>
<table class="center_it"><tr><td>
	<div class="halfway">The should be centered</div>
</td></tr></table>

</body></html>
    Code (markup):

    The second technique is slightly larger, but is more versatile as your DIV can auto-adjust to any height... usually if you have a element with a fixed height, use the DIV method... if the bit you are trying to center is going to be dynamic, that's when a table usually wins...

    unless of course you are willing to dabble into javascript, in which case you just absolute position it after onload - the problem being non-js users won't get it centered.

    Mind you, both these techniques are only really reliable if you have nothing else on the screen... or get REALLY good with negative margin and absolute positioning tricks.
     
    deathshadow, Jul 13, 2007 IP