CSS- How to keep a Div always center to Window?

May 30, 2007

Usually we all want our main content window to keep floating in middle of window when user resize browser or change display resolution and here is the small trick I used in my website (http://www.lakkakula.com)

Logic in CSS goes like

#yourdivid {
width : x px;
position: relative;
left: 50%;
margin-left: -x/2 px;
}

For example your div id is container and width is 600px
#container {
width: 600px;
position: relative;
left : 50%;
margin-left: -300px;
}

About these ads

35 Responses to “CSS- How to keep a Div always center to Window?”

  1. Alex Says:

    Your solution is not working with IE6 (test news.php on my website). Do you have a “IE6 friendly” solution?

    The Flash header sould be centered all the time (even if window width < Flash width).

  2. shaggy Says:

    .Container {
    *text-align:center; /* if you want ie<6 to center, i usually leave this out*/
    }
    .Main {
    *text-align:left; /* ‘*’ hides from smart browsers */
    max-width:1000px;
    _width:1000px; /* for ie ie<7 */
    margin:auto;
    }
    /* semi stretchy layouts see. romack.net */

  3. Dion Says:

    I am not getting it,
    The first one works on Firefox.
    The second one doesn’t work at all?
    Can you please explain this more clearly?

  4. Dion Says:

    I think this is a better solution.

    #container {
    width: 600px,
    position: absolute;
    left : 50%;
    margin-left: -300px;
    }


  5. I tend to use the solution:

    margin: 0 auto;

    It always works for me…

  6. Gabriel Says:

    Wow! Didn´t try the solution yet but I took a look at your website and it´s simply amazing.

  7. nlakkakula Says:

    Thanks Gabriel for your kind words


  8. [...] tambien en.. CSS- How to keep a Div always center to Window? Tags: [...]

  9. Tom Says:

    Thanks for this – saved me hours:)

    The example has width: 600px, with a comma instead of width: 600px; which I think is a typo.

  10. nlakkakula Says:

    Thanks Tom. Corrected it.

  11. Kila Says:

    Fantastic! just what I was looking for.

  12. cwxwwwxdfvwwxwx Says:

    well, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

  13. Omar Says:

    Nice. Will this center any nested divs as well or do you have to manually hard code each div on this page with this code?

  14. Mike Says:

    The combination of your blog and personal homepage have almost completely extinguished any hopes to be a good web-designer, lol. Very, very nice work!

  15. Ton Says:

    I use:
    margin-right: auto;
    margin-left: auto;

    and it works with all the browsers…

  16. Juie Says:

    margin:auto;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    top:0;

  17. Igor Says:

    Sorry if I am chimin’ in too late. The original solution isn’t just bulky but also incorrect. It only works if the winder is wider than then content. Try resizing the browser window to a width less than x. You simply start losing content on the left. margin 0 auto is exactly it.

    • gab Says:

      Thanks Igor – you hit the nail on the head with the lost content on left. Your margin: 0 auto is the best answer – even in finding this one year late!

  18. Emmanuel Says:

    The solution is fine depending on what you want, I always use:
    #container {
    display:block;
    margin:auto;
    width:600px;
    }

    to center any element

    But this blog was exactly what I was looking for, and it is useful if you’ve got a large header image for example that you want to stay centered even if the window is resized

  19. Adam Says:

    Three years later and you’re still helping people out! Great share!

  20. Prasanna Says:

    Worked for me very Well! Thank you.
    KP


  21. You sir, are my hero of the moment. This is absolutely brilliant. A thousand thank yous.

  22. Jeff Says:

    Thanks for this information, this worked well for me.

  23. Stiev Says:

    Thank you, this way works well to my site.

  24. Mr. Pill Says:

    I have some issue i hope you guys can help…

    I have a layout which is 900px and is perfect centered i define all this in the css. But now i want to add a image which is 2000px wide but i want to insert this image in a DIV now the problem is that i just cant center the DIV… I want this DIV to be center with all the rest of the layout.. Thanks in advance…


  25. Oh, my gosh! Thank you SOOO much! This was driving me CRAZY!

  26. Anonymous Says:

    Beautiful!! thats what im looking for u make my day thx a lot!!

  27. myiah Says:

    I had tried eberything that it says to do in this thread and it is not working for me .

    Please review my blog.ivinnovations.com

  28. Anonymous Says:

    trying these solutions!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: