Center fixed div with dynamic width (CSS)

Question

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?

Answer 1

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.