StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Vertical align div

One of current CSS left outs is vertical align div. And before CSS 3 comes we have to use some tricks to solve this problem. I looked over for some solutions and it all comes up to defining it as table and using vertical align. The second one appears a lot and it’s a nice solution, but it has two faults, I’ll tell you later about them, here’s the code first.

Idea is to place absolute div 50% left and top and then to move margin left and top half if it’s size.

Vector people

 
 .wrapper {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
 
Problem?

This works only with defined height and when div height is less then browser height so you can’t have scroll. Now you’ll ask why do anyone want vertical align when there’s a vertical scroll? Well for example you have container height 820px and you have it vertically centered in all larger resolutions, simple.

Solution

In this problem (when browser height is less than div height) at smaller resolutions 1/3 of div is not visible, it’s in negative top margin. So idea is to place some relative div that will prevent div to go into negative margin. Here is the code.

 
<div id="shim"/></div>
<div id="wrapper">
Content
</div>
 
html, body {
height: 100%;
margin: 0;
padding: 0;
}
 
* {
margin:0px auto;
padding:0;
}
 
div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}
 
div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
 
}
 
/* Hide from IE5mac \*//*/
div#shim {
display: none;
}
 
html, body {
height: auto;
}
/* end hack */
 
/* ]]> */
 

Only fault is again defined height and it can’t be solved with CSS, not right now, I hope new version will or some JS fix. Click here for demo

Leave a comment on Stylized Web Have some feedback? Leave a comment

99 Comments So Far

  1. Thanks, man

  2. Thanks so much! exactly what I was looking for. Tony :)

  3. As usually – good work. thanks.

  4. Nice Tutorial. I will definitely want to learn more things in CSS.

  5. By Yorick posted on July 28, 2009 at 11:12 am

    Great coding :) what’s more awesome after putting this type of code any other divs don’t need positioning in main container.. they are just like a bricks.. one on top of other..
    btw. Thanks a lot

  6. By Daren posted on July 30, 2009 at 10:55 am

    Thats the first tutorial using divs for css vertical alignment thats worked for me! Good stuff, thanks.

  7. Chat sohbet Muhabbat

  8. Mirc Mirc İndir

  9. Mirc,Mirc İndir Sex Sohbet

  10. great article, simple and does what it says.

  11. great. thanks!

  12. I seem to have a problem with trying to add a flash movie as a background behind this code or a piece of javascript that will allow we to fade in random images on page logo. Also the page seems to have a permanent margin on 15px?

    I have removed the width as I only wanted it to be aligned vertically as I want my container aligned to the left.

    Thanks in advance

  13. Pingback: 10 Best CSS Hacks

  14. Pingback: 10 best CSS hacks - Nagpur Chat Room

  15. Looking for this every time I have this problem :) Thanks.

  16. Bardzo przydatny i uzyteczny artykul. Slicznie dziekuje i czekam na wiecej :)

  17. Pingback: Problem mit zentrieren der Website, habe alles ausprobiert

  18. Great article! thanks for sharing! Keep up the good work!

  19. Works perfectly! Many thanks!

  20. Thats the first tutorial using divs for css vertical alignment thats worked for me! Good stuff, thanks.

  21. Nice. You could insert the shim with javascript too.

    Hacks for IE4? Funniest thing I’ve read in ages! My agency gave up support for IE6 over two years ago, and we just stopped support for IE7…

  22. simply AWESOME!!!

  23. By Florian posted on November 16, 2010 at 11:14 am

    Thank you very much. This work around is way more compatible to other (horizontal) alignment techniques. Chapeau!

  24. Very good article, can I put it into my page ?

  25. %100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
    UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.

    Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı

  26. Match audio wires go and bark excessively and for long periods can cause bleeding and therefore the sound problem. Therefore, less of a person to the core, core to the zealots constantly yelling for 90 minutes is wrong. These polyps may be wire yell because of the sound.

  27. Online dating sies like Plenty Of Fish and others can be great and an very good way to meet. You must be careful, however since many sites are now being hacked. It’s a smart idea to use a separate email account for your online personals account. You can read some funny stories about dates gone horribly wrong on Plenty Of Fish Tales.

  28. Worked a treat! I used the non shim version before, back when we all had to go home to look on the internet. All these itsy bitsy screen’s are keeping us on our toes.

    Love the idea of adding a relative div to stop the wrapper moving too far up. Simple when you know how.

  29. Worked a treat! I used the non shim version before, back when we all had to go home to look on the internet. All these itsy bitsy screen’s are keeping us on our toes.

    Love the idea of adding a relative div to stop the wrapper moving too far up. Simple when you know how.

  30. MADENCILIK FORUM SITESI

  31. Thanks Thats the first tutorial using divs for css vertical alignment thats worked for me! Good stuff

  32. Love the idea of adding a relative div to stop the wrapper moving too far up. Simple when you know how.

  33. The post is very usefull and it contain graet ideas

  34. how to align two images in the same line…

  35. great article, simple and does what it says…

  36. Thanks so much! exactly what I was looking for. Tony …

  37. Thanks. This write is very good and important. I will read it replay.

  38. i believe that will,Measures however in favor of aesthetic in addition to ethnical plans strongly recommend the fact that interpersonal natural world is likely to have more sightseers, that would offer immense bottom line which will city homeowners. A lot of folks really associate the particular establish of which master

  39. good
    you can see my blog too

  40. Match audio wires go and bark excessively and for long periods can cause bleeding and therefore the sound problem. Therefore, less of a person to the core, core to the zealots constantly yelling for 90 minutes is wrong. These polyps may be wire yell because of the sound.

  41. Thanks for the tip, I have been looking through the forums for this solution for weeks. You have saved me lots of head scratching.

  42. thx for code. helps me a lot ;)

  43. Thank you ! very useful and important :)

  44. By Hjalmar posted on November 13, 2011 at 12:32 am

    I am really thankful for this code as my former way of solving this problem doesn’t seem to be accepted any more (nested tables with the hight of the ‘layout table’ set to 100% and ) I do not have that much time to keep updated on changes of the standards, so it is great that someone do this job! (On the other hand I find it very strange that such a basic design tool is not handed easier by css and consequently incorporated in web design software)

  45. Pingback: 破手札 » Blog Archive » 十個最好的CSS hacks

  46. In A, B, C, high levels of vitamins and beta carotene barındıran­African Mango, form meets guidelines as well as the effect of contributi­ng to the beauty of your hair and skin. Beta Carotene, to ensure the beauty of the skin, night vision to strengthen the immune system against disorders, a variety of infections contribute to the substance.­Those who want to enter the world healthy and permanent form, which is a product of choice for African Mango, now in Turkey. Because people prefer to use a 100% herbal product that helps people to enter the African Mango form a single product…

  47. Thanks for the good writeup. It if truth be told used to be a enjoyment account it. Glance complex to more added agreeable from you! However, how can we keep in touch?

  48. Those who want to enter the world healthy and permanent form, which is a product of choice for African Mango, now in Turkey. Because people prefer to use a 100% herbal product that helps people to enter the African Mango form a single product.

  49. Woah this blog is magnificent i really like studying your articles. Stay up the good work! You recognize, a lot of individuals are looking round for this information, you could help them greatly.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>