CSS horizontal centering of a fixed div?
#menu {
position: fixed;
width: 800px;
background: rgb(255, 255, 255); /* The Fallback */
background: rgba(255, 255, 255, 0.8);
margin-top: 30px;
}
I know this question is a million times out there, however I can't find a solution to my case. I've got a div, which should be fixed on the screen, even if the page is scrolled it should always stay CENTERED in the middle of the screen!
The div should have 500px
width, should be 30px
away from the top (margin-top), should be horizontally centered in the middle of the page for all browser sizes and should not move when scrolling the rest of the page.
Is that possible?
The answers here are outdated. Now you can easily use a CSS3 transform without hardcoding a margin. This works on all elements, including elements with no width or dynamic width.
Horizontal center:
left: 50%;
transform: translateX(-50%);
Vertical center:
top: 50%;
transform: translateY(-50%);
Both horizontal and vertical:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Compatibility is not an issue: http://caniuse.com/#feat=transforms2d
left: 50%;
margin-left: -400px; /* Half of the width */
If using inline-blocks is an option I would recommend this approach:
.container {
/* fixed position a zero-height full width container */
position: fixed;
top: 0; /* or whatever position is desired */
left: 0;
right: 0;
height: 0;
/* center all inline content */
text-align: center;
}
.container > div {
/* make the block inline */
display: inline-block;
/* reset container's center alignment */
text-align: left;
}
I wrote a short post on this here: http://salomvary.github.com/position-fixed-horizontally-centered.html
Edit September 2016: Although it's nice to still get an occasional up-vote for this, because the world has moved on, I'd now go with the answer that uses transform (and which has a ton of upvotes). I wouldn't do it this way any more.
Another way not to have to calculate a margin or need a sub-container:
#menu {
position: fixed; /* Take it out of the flow of the document */
left: 0; /* Left edge at left for now */
right: 0; /* Right edge at right for now, so full width */
top: 30px; /* Move it down from top of window */
width: 500px; /* Give it the desired width */
margin: auto; /* Center it */
max-width: 100%; /* Make it fit window if under 500px */
z-index: 10000; /* Whatever needed to force to front (1 might do) */
}