Because the twitter is blocked in China.
So this lines of code used a very long time to load. http://platform.twitter.com/widgets.js
Can optimize external javascript as load dynamic?
Forgive my ignorance, but why does the css have two identical id selectors? The 2nd line has #page{…} and the last line has it again (though affecting different things).
Why not combine them? Or is it for some reason I don’t understand?
Same question, but i guess it is just for the sake of organizing the code. but i would really like to know if there was a specific reason for doing it that way.
This works wonderfully, thanks for sharing. I still get sick to my stomach when I have to consider IE hacks, but such is life.
@Brian, I tried combining the CSS for the 2 #page selectors and saw no change in rendering in Firefox. I surmise there’s a very selective reason why it’s been separated out (perhaps some sort of forethought to using it in a grander design?), however for this basic example, it seems to not matter.
— Jesse
PS, at the time of posting this, my portfolio site is quite raw; judge not, please.
CSS: copy/past and apply source formating(or leave it as is…)
html,body{height:100%}*{margin:0;padding:0}#content{border:1px solid #666;padding:10px}#content_container{display:table-cell;padding:10px;vertical-align:middle}#page{display:table;height:100%;margin:0 auto;overflow:hidden;width:465px}:first-child+html #page,* html #page{position:relative}:first-child+html #content_container,* html #content_container{position:absolute;top:50%}:first-child+html #content,* html #content{position:relative;top:-50%}
HTML:
use the one provided on top of this article
__ – __
An element centered horizontally and vertically without JavaScript!Pure CSS technique allows an element with dynamic height, horizontal and vertical justify center.tested with: Win: ie6, ie7, ie8, Chrome 2, Firefox 2Mac: Safari 3, Safari 4 (beta), Firefox 3, Opera 9Unresolved Problem:IE6 and IE7 – something with scrollbar if the content is larger than the browser window….Source: Some nice peopleQuick translated by some nice guy who, as the author of this place, likes to help.. to be helped – by nice people.
Correcting the format of last paragraph:
An element centered horizontally and vertically without JavaScript!
Pure CSS technique allows an element with dynamic height, horizontal and vertical justify center.
Tested with: Win – ie6, ie7, ie8, Chrome 2, Firefox 2; Mac – Safari 3, Safari 4 (beta), Firefox 3, Opera 9.
Unresolved Problem: IE6 and IE7 – something with scrollbar if the content is larger than the browser window….
Source: Some nice people http://www.flashjunior.ch/school/test/divcentering/index.cfm .
Quick translated by some nice guy who, as the author of this place, likes to help.. to be helped – by nice people.
Saved me some time reworking a site that has CSS classes in place to position stuff based on the content which was creating a maintenance nightmare.
Thanks Chris.
(You can remove my first comment, and this line during your moderation if you’d like. I accidentally made my url HTTPS, which it is not, so the link wasn’t working.)
hai yo man its working
Very good script. Congrats!
Because the twitter is blocked in China.
So this lines of code used a very long time to load.
http://platform.twitter.com/widgets.js
Can optimize external javascript as load dynamic?
great….
very useful fool!
you mean tool, right??
FAIL. You can’t even copy the stuff from the page to try it.
Good stuff. …And I like the new site logo and fonts. ;)
So great !! It works IE7, IE8, FF 3.5
Thanks.
Forgive my ignorance, but why does the css have two identical id selectors? The 2nd line has #page{…} and the last line has it again (though affecting different things).
Why not combine them? Or is it for some reason I don’t understand?
Same question, but i guess it is just for the sake of organizing the code. but i would really like to know if there was a specific reason for doing it that way.
This works wonderfully, thanks for sharing. I still get sick to my stomach when I have to consider IE hacks, but such is life.
@Brian, I tried combining the CSS for the 2 #page selectors and saw no change in rendering in Firefox. I surmise there’s a very selective reason why it’s been separated out (perhaps some sort of forethought to using it in a grander design?), however for this basic example, it seems to not matter.
— Jesse
PS, at the time of posting this, my portfolio site is quite raw; judge not, please.
Works just great. Much appreciated for this css trick and all the other snippets on offer…
great! thanks!
yeah! man………. it’z working :D thank u so much bro :D
Worked first time on an existing site, very pleased!! wanted to know how to do this forever.
I have no idea what this code does or what any of it means. Not very useful to me.
Thanks .. easy and simple
Thanks Chris, incredible CSS!
You didn’t really use a “*” selector to reset those margins and paddings, did you? Yes, you did.
That’s not exactly what I would call “a smart idea” if you’re planning to put content in between those tags one day. After all “*” means “everything”.
Geez, and that from someone I thought would be smarter than spreading something like that to the general public of noobs and geeks. Tsss…
Yes, I’m a cynic and a critic today! ;)
I’m a big fan of that reset. It’s simple, it’s easy, it covers a lot of ground.
its not working
It’s not working in IE 9
What are you talking about? It works just fine in IE9. You might have some over zealous IE9 Security settings.
Hey man you are requested to checkout the code once more..Its not working.
CSS: copy/past and apply source formating(or leave it as is…)
HTML:
use the one provided on top of this article
__ – __
An element centered horizontally and vertically without JavaScript!Pure CSS technique allows an element with dynamic height, horizontal and vertical justify center.tested with: Win: ie6, ie7, ie8, Chrome 2, Firefox 2Mac: Safari 3, Safari 4 (beta), Firefox 3, Opera 9Unresolved Problem:IE6 and IE7 – something with scrollbar if the content is larger than the browser window….Source: Some nice peopleQuick translated by some nice guy who, as the author of this place, likes to help.. to be helped – by nice people.
__ – __
this really works awesome…..
Correcting the format of last paragraph:
An element centered horizontally and vertically without JavaScript!
Pure CSS technique allows an element with dynamic height, horizontal and vertical justify center.
Tested with: Win – ie6, ie7, ie8, Chrome 2, Firefox 2; Mac – Safari 3, Safari 4 (beta), Firefox 3, Opera 9.
Unresolved Problem: IE6 and IE7 – something with scrollbar if the content is larger than the browser window….
Source: Some nice people http://www.flashjunior.ch/school/test/divcentering/index.cfm .
Quick translated by some nice guy who, as the author of this place, likes to help.. to be helped – by nice people.
Works Great! But with width 100% for the page div does not works, that is what i am looking for.
Hey.!! its not working on IE-6. if we increase our content, no vertical scroll is coming.
Hii friend correct it, it’s not working
Saved me some time reworking a site that has CSS classes in place to position stuff based on the content which was creating a maintenance nightmare.
Thanks Chris.
Saved me some time reworking a site that has CSS classes in place to position stuff based on the content which was creating a maintenance nightmare.
Thanks Chris.
(You can remove my first comment, and this line during your moderation if you’d like. I accidentally made my url HTTPS, which it is not, so the link wasn’t working.)
Thank you, I am using a modified version of this to get my content centered. It works very well on FF. I got rid of over 10 lines of Javascript code.
I have found sourcing the client’s viewport’s height to be a cleaner option.
Here’s a solution that doesn’t use IE hacks: https://css-tricks.com/centering-in-the-unknown/