Horizontal and vertical center text in html [duplicate]

Answer 1

If you want to get VERTICAL centering, I would suggest to use a table inside the DIV (as suggested by Cletus above other ways might be tedious).

div.centered table {margin: 0 auto;} /* no width needs to be specified for table */
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */




    

       

          

             Some text here
          
       
    
 
 

If you are only interested in HORIZONTAL centering (no vertical) you can use only DIV:

div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */



    

       Some text here
    
 
 

As you might have noticed in order to horizontally align a DIV inside a DIV you also need to specify a fixed width for the inner DIV. This might be somehow not what you want to do, so it might be easier to use always the 1st solution (the one with TABLE) and simply remove the "vertical-align: middle;" when you want to get only horizontal centering.

I tested this using document with:

on IE7, FF 3.6, SAFARI 4.0.4