Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have a div that will have this CSS:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Now, how can i make this div centered? I can use margin-left: -450px; left: 50%; but this will only work when the screen is > 900 pixels. After that (when the window is < 900 pixels), it will no longer be centered.

I can of course do this with some kind of js, but is there a "more correct" of doing this with CSS?

share|improve this question
1  
and another....stackoverflow.com/questions/388180/…, this question is asked roughly every 5 seconds. – Liam Jun 12 at 15:30
Or any number of other answers if you search for it – Liam Jun 12 at 15:32
3  
@Liam - Further to that, you can't use a margin: 0 auto on a position: fixed div. Did you even read the question? – Joshua M Jun 12 at 15:35
1  
@JoshuaM Your assertion isn't 100% correct. See my answer. – laconbass Jun 12 at 16:01
show 6 more comments

2 Answers

up vote 3 down vote accepted

You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

See this example working on this fiddle.

share|improve this answer
This worked exactly as i wanted! Thank you! – gubbfett Jun 12 at 16:09
1  
Just to mention... It's not that unexpected, but it fails in IE7. It's positioned 0px from left here. It does how ever work perfect in IE 8. – gubbfett Jun 12 at 16:28
As you said, not that unexpected ;) – laconbass Jun 12 at 16:41
up vote 0 down vote 
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

You'd need to wrap it in a container. here's the css

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}
share|improve this answer
Ah, i like your thinking. The fixed div will only be a container for another div with the actual result? I'll try this one! – gubbfett Jun 12 at 15:41
1  
Extra HTML markup isn't need. Take a look at my answer. – laconbass Jun 12 at 15:55
While I do like the intuitiveness of your answer I do not see how it would allow support of ie6/7. – Mathew Berg Jun 12 at 18:37
1  
@MathewBerg, good point about ie6/7. In that case your answer should work best. This is a little OT, but personally i think developers should'nt spend time fixing stuff for <= ie7. I think actually developers should block those browsers to force people and companies with old systems to upgrade. It is how ever hard to sell that idea to a paying customer! ;) – gubbfett Jun 13 at 8:43
Yes, but unfortunately some companies require support for legacy browsers no matter how far into the future we get. Go ahead and accept either mine or laconbass' answer depending on your needs. – Mathew Berg Jun 13 at 15:25
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.