Help centering a div

[noahgelman]

I have a div that appears after a clicking action. The div is fixed 150px from the top but I need help centering it in the middle. Normally, it would be really easy to center it, but the div width isn’t static, it changes width so I’m having a bit of a problem. I don’t want to use javascript. I want to be able to do this with just CSS. Any ideas?

btw, margin: 0 auto isnt gonna work since the position is fixed

[noahgelman]

No help?
Nooooooooo!!
And I thought the friendly title would get me some help

[Chris Coyier]

Link?

[TheDoc]

The non-fixed width of the div makes things a little tough, because left: 50%; won’t work. Hmmmmm.

[noahgelman]

Sorry, on a private server so i can’t provide a link. I could go right:0 left:0, margin:auto and it would center it for me, but it would have to have a set width. I could also left:50% and use some margin to center it but again I would need a set width. But because it changes I’m not sure what to do. I could just use javascript to get the width and center it and yada yada yada but I want to do this with CSS alone.

[sylenix]

use this css hack to center your div:

text-align: center

firstly, wrap your div to be centered with 2 more divs;

put that css hack to the outermost div;
also, specify the width of your page or use:

margin: 0 auto;

next wrapper div:

display: table;

margin: 0 auto;

your div:

display: table-cell;

and lastly, this:

html div.yours {

display: inline;

}

[jamygolden]

@sylenix I don’t think that would work as the div is set to position: fixed

[noahgelman]

Yeah, that wouldn’t work because it’s fixed. However it did give me an idea. If I wrap my current div in another div, and set that to fixed from the top and 100% width, I should be able to give my real div margin: 0 auto

That should work right?

[noahgelman]

Figured it out. My top answer wasn’t quite right when I tried it. But, then I remembered an article I read about how to center unordered lists in a nav when you don’t know their width. This is pretty much the same thing.

First I wrap my main div in another div, which I fix to the top. I then put left:50% on it. Then on my main div I make position relative and put left:-50% on it. And that centers it no matter what the width is.

[soap]

If a div doesn’t have a fixed width, isn’t it automatically 100%?

[noahgelman]

yeah, unless you display it inline-block which will allow it to stretch as wide or as thin as I want

[soap]

I thought inline-block wasn’t supported by all browsers.

[noahgelman]

There is a bit of incompleteness. IE 6/7 accepts the value only on elements with a natural display: inline. But there are always workarounds

[Author]

Posts