Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Centering a div ?

    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;
    etc,etc.....
    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?
    Thanks
    Shepard

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The margin-auto method will only centre horizontally.

    It depends on what else is on your page.. try this or other Google results.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    841
    Thanks
    11
    Thanked 79 Times in 77 Posts
    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/choos...b-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/...yd/birtthtw/h/

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/

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

    http://pastebin.com/p7phM4wA
    http://paynelessdesigns.pastebin.com/9351BVL5
    http://www.wpdfd.com/editorial/thebox/deadcentre3.html
    No Image: http://nopeople.com/CSS%20tips/verti...CSS/page4.html
    Last edited by Major Payne; 08-05-2012 at 06:07 PM.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •