How to Center an Absolute Div

Absolute positioning lets you position an element where you want it to appear on the screen.

Centering an element using absolute positioning can make a website look more professional and streamlined. The element will always appear in the middle of the page and cannot be shifted by various Web browsers. The technique comes with some quirks. Getting the code down exactly and visualizing what you want to appear on the page should make the process streamlined and successful.

Things You'll Need

• CSS coding knowledge
• HTML coding knowledge
• Coding program or basic text editor
• Access to website's cPanel

Instructions

Visualize your site and write it on paper

1. 

   Drawing out your design makes implementation easier.

   Draw your site on paper, rather than keeping it all in your head, before beginning the code. It helps visualize the steps. The code will make more sense if you can think it through on paper.

2. Open your style sheet and type the following for the element that you want to position in the middle:

   name of element to center {

   position: absolute;

   top: 0px;

   left: 50%;

   margin-left:-75px;

   }

   Setting the left side to "50%" will make the element start at dead center of the page because it is starting at the halfway point (or 50 percent from the left horizontal axis).

3. Save the new style sheet and upload it to your website through the cPanel (control panel). Preview the page and see if the element is positioned correctly.

Positioning and Centering Multiple Elements

1. Assign a z-Index to your elements to rank which appears above the others if you are planning to stack more than one element or if you have a block of text that you want to appear on top of the positioned element.

2. Set the element to -1 if you want it to appear below a block of text:

   name of element to center {

   position: absolute;

   top: 0px;

   left: 50%;

   margin-left:-75px;

   z-index: -1;

   }

3. 

   Absolutely positioned elements can be stacked just like blocks.

   Stack multiple elements in the center by providing the right z-index to each one. For example, if you have three images that you want to stack on top of each other from smallest to largest, do the following:

   center element small {

   position: absolute;

   top: 0px;

   left: 50%;

   margin-left:-75px;

   z-index: 1;

   }

   center element middle {

   position: absolute;

   top: 0px;

   left: 50%;

   margin-left:-75px;

   z-index:2;

   }

   center element large {

   position: absolute;

   top: 0px;

   left: 50%;

   margin-left:-75px;

   z-index: 3;

   }

Tips & Warnings

• Remember to apply z-index tag in your CSS description if you are stacking elements.

• For the z-index, 1 will always be the top element.

• Absolutely positioned elements can overlap other elements that are not absolutely positioned.

References

• W3Schools: CSS Reference