How do I align divs down the center of a page?

Discussion in 'CSS' started by Imozeb, Mar 14, 2010.

  1. #1
    How do I align div tags down the center of a page using CSS?

    My divs look like this:
    
    <div id="main">
    <div id="header">
    code...
    </div>
    <div id="content">
    code...
    </div>
    <div id="footer">
    code...
    </div>
    </div>
    
    Code (markup):
     
    Imozeb, Mar 14, 2010 IP
  2. danramosd

    danramosd Active Member

    Messages:
    115
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    83
    #2
    Try this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <style type="text/css">

    #content
    {
    position:absolute; top:50%; height:10em;

    }

    </style>
    </head>

    <body>



    <div id="content">
    sdf
    </div>
    </body>
    </html>

    if you have any more questions hit me up on twitter @danramosd
     
    danramosd, Mar 14, 2010 IP
  3. dabzo

    dabzo Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    margin:0 auto;
     
    dabzo, Mar 14, 2010 IP
  4. haswow

    haswow Guest

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try #container{margin:0 auto;} and
    body{text-align:center}
    to work in all browsers.
     
    haswow, Mar 28, 2010 IP
  5. premium-theme

    premium-theme Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    .main {margin-left:auto;margin-right:auto;}
     
    premium-theme, Nov 23, 2011 IP
  6. leanocodes

    leanocodes Member

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #6
    Set a specific width then margin:0 auto;
    Viola! :)
     
    leanocodes, Dec 1, 2011 IP
  7. webdesignbd

    webdesignbd Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hi
    This code is very helpful for me. Thank you.

    Munni
     
    webdesignbd, Dec 2, 2011 IP
  8. Garebooo

    Garebooo Member

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #8
    #content { margin: 0 auto; width: xxxpx; }

    xxx set the width of the div
     
    Garebooo, Dec 4, 2011 IP
  9. fhk_kz5

    fhk_kz5 Member

    Messages:
    191
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #9
    If you want all your divs to be centered then do this
    #main{
    width:960px;
    margin:0 auto;
    }
    you can set whatever width you want.
     
    fhk_kz5, Dec 7, 2011 IP