SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    shropshire uk
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center design using css

    How do i center a design vertically and horizontally in the browser window using CSS.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends on how you layout your page. If its a fixed width layout with a wrapper div surrounding your "columns" as in floating, setting the wrapper's left and right margin to auto will do the trick.

    If you use absolute positioning, you'll have to surround the absolutely positioned div's in a relative positioned container and calculate the total width and apply it to this container. This is explained in Paul's FAQ.
    Ryan Butler

    Midwest Web Design

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For elements of known dimensions you can do something like this assuming you are centering within the viewport.

    http://www.pmob.co.uk/temp/flashbg.htm

    Vertical centering is unfortunatley a little complicated in css and the method used depends on the situation in hand.


Bookmarks

Posting Permissions

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