Reputation: 3621

Elegant way of absolutely centering a div?

Is there a way without writing a bunch of css and nesting divs or writing jQuery scripts with negativ width values?

If not, what´s your preferred way of implementing this?

I have no idea why such a simple task is not part of the html specification.

Edit: With 'absolutely' I also mean vertically centered! Sorry. Plus: It should work with dynamical widths (don´t want to specify them).

I´d like to have something like this:

<div class="ninja-center"></div>

And the div appears in the center of the screen. It really should be THAT easy. No freaky css, scripts, etc. I mean it also works with 2, 3 or 4 ways like this with only horizontal centering:

margin: auto
text-align: center
align="center" (obsolete)
...

Why is there nothing for vertical alignments.

Upvotes: 2

Answers (4)

Paul Sweatte

Reputation: 24617

Use display:inline-block, vertical-align:middle, and height:100% to vertically center content that has an undefined height across browsers:

html, body, .container, .placeholder { height: 100%;}
.placeholder, .wrapper { display: inline-block; }
.placeholder, .wrapper, .content { vertical-align: middle; }

The placeholder element is given 100% height to prop up the line box, so that vertical-align: middle has the desired effect.

Use a fixed width container to wrap the images:

.fixed { min-width: 1px; }

Use the following to horizontally center content that has an undefined width across browsers:

.content { display:inline; }
.container { text-align:center; }

Combine both techniques to create a centered element:

    <!doctype html>
    <html>
    <head>
    <title>Centered Image Gallery</title>
    <style type="text/css">
    html, body, .container, .placeholder { height: 100%;}
    
    img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; }
    
    .container { text-align:center; }
    
    /* Use width of less than 100% for Firefox and Webkit */
    .wrapper { width: 50%; }
    
    .placeholder, .wrapper, .content { vertical-align: middle; }
    
    /* Use inline-block for wrapper and placeholder */
    .placeholder, .wrapper { display: inline-block; }
    
    .fixed { min-width: 1px; }
    
    .content { display:inline; }
    
    @media,
     {
     .wrapper { display:inline; }
     }
     </style>
    
    </head>
      <body>
      <div class="container">
        <div class="content">
            <div class="wrapper">
              <div class="fixed">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
            </div>
          </div>
       </div>
       <span class="placeholder"></span>
    </div>
    
    </body>
    </html>

Upvotes: 0

Nanne

Reputation: 64399

If your specifications aren't simple, the solution isn't either. If you have a simple request (one div, you want it in the center) you'll get a simple solution: just use margin:auto on a div with a width.

Like this random google link shows: http://bluerobot.com/web/css/center1.html

Excerpt you want:

width:500px;
margin:0px auto;

See this in action in @myheadhurts 's jfiddle from the comments: http://jsfiddle.net/8vjGA/

Upvotes: 3

markvandencorput

Reputation: 931

This explains some great options for centering:

http://css-tricks.com/centering-in-the-unknown/

Upvotes: 1

langel

Reputation: 99

For example:

 div#giveanidnumb {
    margin:0px auto;
}

Then you can add all the css specs you want

Upvotes: 0

Elegant way of absolutely centering a div?

Answers (4)

Related Questions