StylizedWeb is a web design trends and tutorials blog, maintained by Ross Johnson who also runs a web design company and design blog.

Categories Archive

Popular Posts
Advertisement
Basecamp The Web Design Sketchbook
Najbolje ponuda IT poslova u Srbiji na itposlovi.info Advertise on Stylized Web

Vertical align div

add to Save to Delicious Save to Stumble Save to Digg

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



Talk of the town
  • Renea: Earning an extra commission check help put my kids through private school! No doubt it
  • South West Balloon Flights: Thanks for the script. Looks nice.
  • Tony: How about WP Super Cache. Google now takes into account a site’s loading time and what better way to...
  • Emek Elektrik: Thanks Adminstrator For Dar Gelirli Users…
  • Nelly: That is a good article for css thank you admin
Amigos

What do you think?





62 Responses so far

By AK
on February 5, 2010

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

By daddy design
on February 4, 2010

great. thanks!

By mike
on October 13, 2009

great article, simple and does what it says.

By Sohbet
on September 16, 2009

Mirc,Mirc İndir Sex Sohbet

By Sohbet
on September 16, 2009

Mirc Mirc İndir

By Chat, Sohbet
on September 16, 2009

Chat sohbet Muhabbat

By Daren
on July 30, 2009

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

By Yorick
on July 28, 2009

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

By Neel
on July 25, 2009

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

By high class female girl
on June 13, 2009

As usually – good work. thanks.

By Tony Brand
on June 5, 2009

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

By Acronyms
on June 2, 2009

Thanks, man

By Афанасий
on May 24, 2009

Отлично написано, приятно полистать ваш сайт!

By mp3
on March 21, 2009

Turkisch free mp3 download.

By scalesy
on February 10, 2009

Ignore that last post – I’d set the wrapper div’s width wrong… guess I’m a bit of a div.

By scalesy
on February 10, 2009

Thanks for the code – have been looking for somthing like this for a while… making a website for a friend and it’s embarrasing to not know how to vertically center something on a page!!!

I still have a little problem though… works great in FF3, but in IE7 the div won’t center horizontally – seems to be glued to the left of my broswer window.

Can anyone suggest what the problem might be?

By Aryan (Mahendra B. Twanju)
on January 28, 2009

Hey dude nice hacks. Thanx 4 da tips.

By gcyrillus
on December 12, 2008

oups , too many post , just keep one if you like

Regards (a french css player)

By gcyrillus
on December 12, 2008

Hi ,

I still believe , negative margin (with absolute or relative positionning ) is not ‘accessible’ nor really efficient , browsers are improving ther behaviors :) ..

Nowdays , beside te real table (must be styled with CSS ) you can decently look after : inline-block and get used to display:table;

Display:table; will finally be understood by IE 8 , it’s about time to learn to use it and do not confuse table & css , IE6 & 7 will survive for a while . So not really usable in a professionnal context or website yet .

Inline-block , is now understood too bye FF3 , FF2 has a work around easy to set up (& usershould not take years to update) ,
Conditionnel Comment needed for IE 7 and below of course to serve an inline-block css compatible with block elements in standard mode (it’s all about haslayout ).

Where it is more efficient , is that you don’t need to know or set the height of the element to center. … you can set a few elements aside and vertical aligned . (inline-block requiert 2 elements :o ne that takes heights of screen or minimum height to set in a box wherever i, a page , a second one wich the vertical centered elements container.

The CSS rules used for FF2 and below , needs an extra wrapper to control the stakking effect , this element is useful too to contain white-space in IE if used … because of that one pixel jog .

see it here (css inside head section) : http://yidille.free.fr/plux/valign/uploads/centre-inline-stack.html

last call :)
respects

GC

By Gcyrillus
on December 11, 2008

Hello ,

Using negative margin brings some problem if the screnn height or wigth is les than the centered element , and it is a quiet old trick .

Min-width and min-height can avoid these ‘accessibilty ” troubles , a turn around is even possible in IE6 if you use a standard mode .

As long as IE7 will be around , you won’t be abble to beat the table “element” for real efficient or non buggy vertical-align elsewhere you have a td or 2 inline elements to vertical center .

Beside the table elements , i propose 4 ways to center a div element or whatever in a page without a table : http://yidille.free.fr/plux/valign/index.php?004/Css-gabarits
(a demo inline is there and then down the bottom links to full template html page , to show it works either for a page or a portion of a page … i’m french , so the page i written in french , … css doesn’t care about the language you speak , so look at the source if youre curious :) )

For each and if needed , i propose an IE alternative .
The exemple are using a valid doctype because it’s now end of 2008 :)

(sorry , but i hate this negative margin if you let the content able to diseappear on top or left side , it just doesn’t help )

GC

By Bijomon
on December 10, 2008

#outer {width: 100%; height:60%; text-align:center;}
#inner {width: 402px; margin: 20% auto 20% auto;}

u can set the [outer] height’s size as per your requirement

By pradeep
on December 3, 2008

how to align two images in the same line

By pradeep
on December 3, 2008

skldfjoisdufoawjrflksjdfljsdlfjoiasdufoweaurouweorjldflkdjfldjfauruweioruf

By maroc annonces
on November 30, 2008

How to align two images in the same line?

By djmaze
on September 19, 2008

It can be much, much easier:

html, body, #table { height:100%; }
body {
text-align:center;
display:table;
width:100%;
}
#table {
display:table-cell;
vertical-align: middle;
}

The IE fix:

#container {
margin-top:expression(((offsetParent.offsetHeight-offsetHeight)/2)+’px’); }

By sanjay
on June 26, 2008

Hi dude,

i want to learn css. Please provide tricky things

By Dejan Cancarevic
on June 18, 2008

Geat,
heh thanks dude!

By Geat
on June 18, 2008

Useful article, but mainly I love the design of your site! The use of sky, sea and seabed for the three main sections of a page is really sweet.

By prashant
on June 16, 2008

please give the rounded shape box on table less design

By yummig
on May 25, 2008

Your site is a lifesaver, I scraped the internet for hours on end looking for a cross-browser solution. I even started brute-forcing CSS combination, the closer I got on one browser, the further away I got on another.

I Love You

By Strony
on May 22, 2008

Hi There! I’m from Poland and came to you website by google, as I’m here, I would like to thank you for all thoose great tips! Keep up this good work! :)

By Dejan
on May 19, 2008

thank you very much :D

By cornices centre
on May 19, 2008

Works perfectly! You are very talented person Dejan! I’m glad I could visit your page. Thank you. :)

By Dejan
on May 8, 2008

you are welcome ;)

By House Clearance London
on May 8, 2008

Hi. Many thanks for interesting guides. I’ve been looking to this page from time to time, and I’m really amazed about your skills! Thanks & take care!

By krizalid_01
on April 6, 2008

That IS progress. Your blogging skills are getting better and better. I had a great time reading this post.

By Omar
on April 3, 2008

I agree with everybody else: awesome story.! Much food for thought… It really made my day. Thank you.

By Michael Hazzard
on February 16, 2008

Nice trick. But until css3 is perfected/implemented I would I would be fine w/ using a table because realistically it is more stable.

By Dejan
on February 16, 2008

Well margin:0 auto; makes it on center, so remove that auto word and add right:1px;
Try it and let me know if it works

By Brian Purkiss
on February 15, 2008

Sweet!
I’ve used it, and it’s working!
It’s not on the web yet though.
I’ll let you know when.

But let’s say I wanted to align it right – would all I have to include is:

float:right

?

By Dejan
on February 14, 2008

@ Billgates
Yes, but this is tableless code

By Billgates
on February 14, 2008

This is a working vertical DIV alignment (including clipping). No percentages used, and it works on both IE and FF.

http://cssbeauty.com/skillshare/discussion/2607/real-working-div-vertical-align/

By Dejan
on February 1, 2008

@ Brian
Yes that’s right
Did you find answer from your forum question here?

By Brian Purkiss
on February 1, 2008

So in that demo, the red box is what is centered?

By Dejan
on February 1, 2008

@ Berkana
No, it has to be like this

Click here for demo

By Berkana
on February 1, 2008

Should the code for div#wrapper say “margin-top:-200px;” rather than “top:-200px;” ?

By Patrick
on February 1, 2008

This is a problem that has definitely plagued a lot of us designers/developers. I know that I certainly have tried to find a solution for this many times.

Fortunately, many situations have allowed for me to set a height to the element I wish to apply the middle vertical align effect, and in a small area of the website, so it did not rise an issue with the scrolling of the page.

I too hope that CSS3 will solve this, though I do believe that there is a JS fix for it, but I don’t know what it would be.

  1. Apr 13, 2009: PureCSS » Blog Archive » 关于绝对居中问题
  2. Mar 19, 2009: Vertical align div | StylizedWeb.com | CSS Tutorials - CSSHelper.net
  3. Sep 2, 2008: 10 Great CSS Hacks « Thatgrafix Blog
  4. Aug 22, 2008: Best Css hacks · Css Edge :: Your best CSS resource guide
  5. Aug 17, 2008: Email:luvAdobe@gmail.com » 10 best CSS hacks
  6. Jun 14, 2008: vertical align
  7. May 7, 2008: 10 buenos hacks para CSS « SylarPoOoX
  8. Mar 19, 2008: 10 best CSS hacks « Share4Vn.com Blog
  9. Mar 7, 2008: CSS-FAQ » Blog Archive » CSS Hacks for You! (First Serving)
  10. Mar 7, 2008: NilDesign.ru » 10 лучших CSS хаков + кроссбраузерность
  11. Mar 7, 2008: Thatgrafix Web Design Portland Oregon
  12. Feb 26, 2008: Los 10 mejores hacks CSS — Freak Group
  13. Feb 20, 2008: 10 best CSS hacks « DELE DURO!!!
  14. Feb 20, 2008: links for 2008-02-19 | dies und das | XSBlog2.0beta
  15. Feb 16, 2008: 10 best CSS hacks