Bookmark and Share

Center and Middle Alignment for a Website using CSS

Different websites have different align position in the browser. Like top-centered, middle-centered and often left-top position. This is tutorial will show you how to align website to any part of the screen. I think i will be helpful for beginners.

For all examples I will use same Xhtml code.

1
2
3
4
5
6
7
8
9
10
11
12

< !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=utf-8" />
	<title>Example - Crazy Xhtml</title>
	<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
	<div id="wrapper">
	</div>
</body>
</html>

All changes I am doing in the style.css in #wrapper{ … }

Let’s define standard styles for wrapper block of our small website. I am adding borders and background. It helps to see website position.

1
2
3
4
5
6

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
}

Center Middle Align (Center Horizontal)

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11
12

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -150px;
}

So, in my example width=400px, so for margin-left I calculated value as this 400/2=200. The same do for margin-top – 300/2=150.

You can download example here

Center Bottom Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-200px;
}

The main idea is same, but I am using bottom=0 to move #wrapper block to the bottom of the browser.

You can download example here

Center Top Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:0 auto;
}

If you want, you can add top margin for #wrapper. For example, I add 20px:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:20px auto 0 auto;
}

You can download example here

Left Middle Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
}

The main thing is to correct calculate of margin-top.

You can download example here

Right Middle Align

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
	right:0;
}

The code the same as above, but I add right:0 to move #wrapper to right part of browser.

You can download example here

In Conclusion, I think you can create code for Right-Top, Right-Bottom, Left-Top and Left-Bottom easily using my code above.

Thanks for the reading.

Comments (5)

  1. Atea says:
    June 21, 2009 at 5:51 pm

    Usefull, thank you!

    Reply
  2. Leonie Bielefeld says:
    July 15, 2010 at 11:51 pm

    Great post, thanks for sharing. Keep up the fantastic work and keep em coming

    Reply
  3. Christian says:
    September 15, 2011 at 8:56 am

    Fantastic, thank you!

    Reply
  4. jerry says:
    November 28, 2011 at 3:38 pm

    nice.. but actually this is not what i need…

    how to align dl tag in a div tag. (div’s height is not fixed. its dynamically expandable)..

    and i dont want fit the tag’s position s absolute…

    can anyone help me???

    Reply
  5. Crazy Xhtml says:
    December 10, 2011 at 6:09 pm

    Hello. I think, you need to try Javascript. It is impossible with CSS.

    Reply

Leave a Reply

Categories

Latest Postsrss

Latest Tweetstwitter