Center DIV of Main Page

5 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Center DIV of Main Page
mikethedj4
ok I'm having one of thoughs dumb moments where something is really simple you know it, but are just clueless on how to do it, yeah I'm having a dumb day today.

Anyway what I'm trying to do is align a div, just a simple div to the center of the website so in any resolution you view it in, it's directly in the center, but I can't remember how to do this, can anyone help???
User avatar
Codex
Coding God
Coding God
Posts: 2028
Joined: Wed Mar 31, 2010 5:50 pm

Re: Center DIV of Main Page
Codex
You can use <center> in html,
or you can use ID and add this in the css:
Code: Select all
width: 900px;
margin-left: auto;
margin-right: auto;
just assign the width you want.
We shall let the revolution begin.. the revolution for freedom, freedom against censorship. We shall fight in the fields and in the streets, we shall fight in the hills; we shall never surrender
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Center DIV of Main Page
mikethedj4
I'm not talking about just horizontally, I'm also talking about vertically as well, but anyway I figured it out.
Code: Select all
	position:absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	width:100px;}
Also you don't need margin-left, and margin-right. You could just use this code below to do the same thing (width will need to be adjusted of course for best results).
Code: Select all
div.base {
	margin: 0 auto;
	width:235px;}
User avatar
Scottie1972
Codenstuff Elite
Codenstuff Elite
Posts: 953
Joined: Thu Jan 14, 2010 5:48 am

Re: Center DIV of Main Page
Scottie1972
This is a very simple thing todo.
Just Paste this code in a new webpage (.htm, .html, .php) whatever then load it in your browser.
Beware! IE hates this type of stuff.
But all the other browsers have no problems with it.

Center the <div> Vertically and Horizontally.
Code: Select all
<html>
<head>
<title> ... </title>
<style type="text/css">

/* ALL OTHER BROWSER */
.centered {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  margin: auto;
  background-color: red;
  color: white;
}

/* SORT OF WORKS FOR IE */
.centered_IE {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25%;
  margin-left: -25%;
  background-color: red;
  color: white;
  width: 50%;
  height: 50%;
}

</style>
</head>
<body>

<div class="centered">bleh</div>

</body>
</html>
I would only use the .centered class and forgot about trying to work with IE.

More Advanced
Even works for IE.
Code: Select all
<!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>
<title>Vertically and Horizontally Centering a DIV</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	font-size: 12px;
	font-family: arial, helvetica, sans-serif;
	color: #333;
}

p {
	margin: 1em;
}

.comments {
	background-color: #e3e3e3;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 2px;
}

#mydiv {

	position:absolute;
	top: 50%;
	left: 50%;
	width:30em;
	height:18em;
	margin-top: -9em; /*set to a negative number 1/2 of your height*/
	margin-left: -15em; /*set to a negative number 1/2 of your width*/
	border: 1px solid #ccc;
	background-color: #f3f3f3;
}
</style>
</head>
<body>
<div id="mydiv">
	<p>This is a vertically and horizontally centered <div> tag. Try resizing your browser.</p>
	<div class="comments">
		<p><strong>Comments:</strong></p>
		<p>Tested in: <span style="color: darkblue">Firefox, IE6, Opera 7, NN4.7, NN7, and Mozilla 1.2.</span><br />
		Works in: <span style="color: darkblue">Firefox, IE6, Opera 7, NN7, and Mozilla 1.2.</span><br />
		Doesn't work in: <span style="color: darkblue">NN4.7</span></p>
		<p>&copy; Copyright 2003, <a href="/">Infinity Web Design</a></p>
	</div>
</div>
</body>
</html>
wahooo; Who's the Man!
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Center DIV of Main Page
mikethedj4
Nice one Scottie!

Wish you posted this earlier before I released TimeSamurai, for Chrome.

Still works like it's suppose to though, but I'm definitely bookmarking this encase I get another dumb moment again lol
5 posts Page 1 of 1
Return to “Tutorials”