Center Align in Div

Hello guys,

I know this question may have been asked in several times in several places. I kept on finding the solution for this problem but could not understand. I want to know step by step. First of all I will tell how I do center align my website.
i use a table and a cell i give width="985" and height= (As per I need) to both in table and in td I mean in cell. In that cell I use div with the id = main and in css I make # main as position absolute, z-index : 1 , width and height (same as in table and in cell), top = 0 and. That's it and my site goes centered. I do not give left px otherwise it would be called as for browser. Now I want to learn step by step how we can make div centered. I use fake method or else it is not professional. I want to learn the real method. Can anybody teach here? please I need this. Thanks

 

I want to learn that codes which make a div align center on every browser. Please tell me.

 

To center a div I use

margin: 0px auto;

Code (markup):

To center text I do:

text-align:center;

Code (markup):

I generally avoid tables and use inline divs to move everything to its correct location.

 

Could give me a sample page. That will help me to understand.

 

thats very old style, you should learn css well.

here is how i would do this.

CSS code:
html, body {margin:0;padding:0;height:100%;}
#main {width:985px;margin:0 auto;overflow:hidden;}

HTML code:

<div id="main">
content..................
</div>

 

What if I want to insert more div in main so then I can use top and left px? so that I can move that to anywhere? But that will be in the main div ?

 

I did this, my second div does not work in main div. any solution? Or I didn't get it properly?

 

Make a wrapper class:

.wrapper {
  width: 895px;
  margin: 0 auto;
}

Code (markup):

Put everything you want centered inside a wrapper div:

<div class="wrapper">
.
.
.
</div>

Code (markup):