Tutorial: How to align center on the screen when using position absolute with CSS

As a developer, i always have the chance to come across position: absolute when doing layout and dynamic animation such as pop out box and etc. But for many years it seems like until today then i realize how to correctly align an absolute position container on the center of the screen. Many tutorial uses many trick in order to position their container on the center of the screen for either alert or selective option but it is really REALLY easy to align your container on the center when using position absolute. I will try to show you some simple and easy way to do this with little complication (The reason why it is difficult are mostly because there are so much words written on some tutorial that make it hell confusing).

Align center of the screen

In order to align your container to the center of the screen, what you need is only the following code.

margin: auto;
left:0; right:0;
top:0; bottom:0;

That’s all! Simple and easy to use. We usually use the following to align to center

margin: 0 auto;

This is when we are not using position absolute but this is actually the correct way to align horizontally when using position absolute too! But there is a criteria when we try to align it horizontally using the above code, left and right. We have to reset the right and left in order for the browser to render it to horizontal center with the above code. For vertical center alignment, we will have to reset the top and bottom part. And use the below code to render vertically but not horizontally.

margin: auto 0;

Sound logical right? To sum it up to align horizontally and vertically, we will use the first code that was presented in this article which reset four side and set auto for margin (so that it automatic align for the four side)

Demo

Simple and quick demo to show you that the above code work. Below is the CSS used in the demo

body
{
	text-align: center;
	margin: 0 auto;
}
#box
{
	margin: auto;
	left:0; right:0;
	top:0; bottom:0;
	position: absolute;
	width: 200px;
	height: 200px;
	border: #000 solid 1px;
	background: #82713F;
	text-align: center;

}

The HTML is just a div box

<div id="box"></div>

You can visit the demo at align center of the screen when using position absolute

P.S: This work in all browser except IE

Method that work for all browser

There is a simpler method that will work in ALL browser. But it will required you to know your own block size (the container width and height). It’s really just maths, for example, you have a container with a width of 60% and height of 40%, you will want to move your container 20% from its position to the right (assuming it is at coordinate 0,0) and 30% from top to bottom. Why 20%? Because we must balance between the left and right side of your 60% width container, so 100-60=40/2=20%! Same thing goes for your height. With these condition applied, i can show you the demo with the following code.

body
{
	text-align: center;
	margin: 0 auto;
}
#box
{
	position: absolute;
	width: 60%;
	height: 40%;
	left: 20%;
	top: 30%;
	border: #000 solid 1px;
	background: #82713F;
}

And the HTML part will be the same as our previous demo, you can view the result with different browser at align center of the screen when using position absolute with all browser

Another method also similar to the above but it uses another concept. Instead of calculating the right and left side of the width required in percentage, we use the known width and height which usually locate at coordinate (0,0) and push it opposite direction after we request the CSS to move to center by left and top to 50%. Talk won’t help explain as much as example, with the following code it will illustrate better,

body
{
	text-align: center;
	margin: 0 auto;
}
#box
{
	position: absolute;
	width: 500px;
	height: 500px;
	left: 50%;
	top: 50%;
	margin-left: -250px;
	margin-top: -250px;

	border: #000 solid 1px;
	background: #82713F;
}

What the above does is giving it a fixed width and height (500px), push it to 50% from left to right and top to bottom. It will not align on the center with just this, we will have to use margin to push in the opposite direction(-250px) by half in order for it to align to center. You can look at the result at align center of the screen when using position absolute with all browser compatibility

 

Like this post? Share it!

digg 48 Tutorial: How to align center on the screen when using position absolute with CSS reddit 48 Tutorial: How to align center on the screen when using position absolute with CSS stumbleupon 48 Tutorial: How to align center on the screen when using position absolute with CSS delicious 48 Tutorial: How to align center on the screen when using position absolute with CSS furl 48 Tutorial: How to align center on the screen when using position absolute with CSS technorati 48 Tutorial: How to align center on the screen when using position absolute with CSS google 48 Tutorial: How to align center on the screen when using position absolute with CSS myspace 48 Tutorial: How to align center on the screen when using position absolute with CSS facebook 48 Tutorial: How to align center on the screen when using position absolute with CSS twitter 48 Tutorial: How to align center on the screen when using position absolute with CSS

About Clay

I am Clay who is the main writer for this website. I own a small web hosting company in Malaysia and i'm available to be hired as individual contractor on elance or odesk. You can find me on twitter.
This entry was posted in CSS, How-to and tagged . Bookmark the permalink.

3 Responses to Tutorial: How to align center on the screen when using position absolute with CSS

  1. Victor Teixeira says:

    Hi, just for you to know that the demo is not working on the Opera browser.
    I think it’s because the style rules are outside the html head element.

  2. Clay says:

    Hi Victor, thanks for informing me, i will check them out and update this post accordingly.

    Regards,
    Clay

  3. Clay says:

    Hi Vector,

    Something wrong with Opera inline CSS styling, i just change it to external CSS styling and the demo is up again. Thanks for informing again.

    Cheers,
    Clay