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.
.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
Have some feedback? Leave a comment
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.
Should the code for div#wrapper say “margin-top:-200px;” rather than “top:-200px;” ?
@ Berkana
No, it has to be like this
Click here for demo
So in that demo, the red box is what is centered?
@ Brian
Yes that’s right
Did you find answer from your forum question here?
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/
@ Billgates
Yes, but this is tableless code
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
?
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
Pingback: 10 best CSS hacks
Nice trick. But until css3 is perfected/implemented I would I would be fine w/ using a table because realistically it is more stable.
Pingback: links for 2008-02-19 | dies und das | XSBlog2.0beta
Pingback: 10 best CSS hacks « DELE DURO!!!
Pingback: Los 10 mejores hacks CSS — Freak Group
Pingback: Thatgrafix Web Design Portland Oregon
Pingback: NilDesign.ru » 10 лучших CSS хаков + кроссбраузерность
Pingback: CSS-FAQ » Blog Archive » CSS Hacks for You! (First Serving)
Pingback: 10 best CSS hacks « Share4Vn.com Blog
I agree with everybody else: awesome story.! Much food for thought… It really made my day. Thank you.
That IS progress. Your blogging skills are getting better and better. I had a great time reading this post.
Pingback: 10 buenos hacks para CSS « SylarPoOoX
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!
you are welcome
Works perfectly! You are very talented person Dejan! I’m glad I could visit your page. Thank you.
thank you very much
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!
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
Pingback: vertical align
please give the rounded shape box on table less design
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.
Geat,
heh thanks dude!
Hi dude,
i want to learn css. Please provide tricky things
Pingback: Email:luvAdobe@gmail.com » 10 best CSS hacks
Pingback: Best Css hacks · Css Edge :: Your best CSS resource guide
Pingback: 10 Great CSS Hacks « Thatgrafix Blog
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’); }
How to align two images in the same line?
skldfjoisdufoawjrflksjdfljsdlfjoiasdufoweaurouweorjldflkdjfldjfauruweioruf
how to align two images in the same line
#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
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
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
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
oups , too many post , just keep one if you like
Regards (a french css player)
Hey dude nice hacks. Thanx 4 da tips.
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?
Ignore that last post – I’d set the wrapper div’s width wrong… guess I’m a bit of a div.
Pingback: Vertical align div | StylizedWeb.com | CSS Tutorials - CSSHelper.net
Turkisch free mp3 download.
Pingback: PureCSS » Blog Archive » 关于绝对居中问题
Отлично написано, приятно полистать ваш сайт!