View Full Version : Centering a div ?

08-04-2012, 01:52 PM
Good Morning:
Can anyone assist me in centering a div both vertically as well as horizontally.
I have created a div and assigned the following css rules to it.

#box{width:500px;height:400px;background-color:red;margin:10% auto;}

It is perfectly centered on my page, however as soon as you use the zoom feature in the computer (ctrl "-" "+") the box still remains centered but starts to get dragged to the top of the screen.
I have tried many different combinations.
margin:50px auto;
margin:auto auto;
No luck.
I would like to have this div centered no matter what the user does with either screen resolution or zoom function.
Is it even possible?

08-04-2012, 02:23 PM
The margin-auto method will only centre horizontally.

It depends on what else is on your page.. try this (http://blog.themeforest.net/tutorials/vertical-centering-with-css/) or other Google results.

Major Payne
08-05-2012, 06:04 PM
Getting content to stay or act the way you want it to when resizing the browser's viewport makes for lots of problems. Even flexible pages have problems with this as it is not so much the resolution, but the browser's viewport size at any resolution.

Choosing Dimensions for Your Web Page Layout:

In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
Care With Font Size: http://www.w3.org/QA/Tips/font-size
Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/t/y/l/ydlyuyd/birtthtw/h/

Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites-shouldnt-look-the-same-across-different-browsers%E2%80%A6here-is-why.html
Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/news/cross-browser-css-in-seconds-with-prefixr/
Responsive Web Design Demystified: http://www.elated.com/articles/responsive-web-design-demystified/
Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/responsive-web-design-5-handy-tips/
It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/its-not-responsive-web-building-its-responsive-web-design/

Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

Might look at the coding for centered content and modify as needed:

No Image: http://nopeople.com/CSS%20tips/vertical%20center%20with%20CSS/page4.html