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