CSS horizontal centering of a fixed div

Question

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

User · Answer

It is possible to horisontally center the div this way:

html:

<div class="container">
    <div class="inner">content</div>
</div>

css:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

Using this way you will have always your inner block centered, in addition it can be easily turned to true responsive (in the example it will be just fluid on smaller screens), therefore no limitation in as in the question example and in the chosen answer.

User · Answer

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

User · Answer

Here s another two-div solution  Tried to keep it concise and not hardcoded  First  the expectable html    lt div id  outer  gt     lt div id  inner  gt      content    lt  div gt   lt  div gt    The principle behind the following css is to position some side of  outer   then use the fact that it assumes the size of  inner  to relatively shift the latter     outer     position  fixed    left  50                 of window    inner     position  relative    left  -50                of outer  which auto-matches inner width      This approach is similar to Quentin s  but inner can be of variable size

User · Answer

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

User · Answer

or you can wrap you menu div in another        lt div id  wrapper  gt          lt div id  menu  gt          lt  div gt       lt  div gt     wrapper           width 800px           background  rgba 255  255  255  0 8            margin 30px auto           border 1px solid red              menu          position fixed          border 1px solid green          width 300px          height 30px

User · Answer

Here s a flexbox solution when using a full screen wrapper div  justify-content centers it s child div horizontally and align-items centers it vertically    lt div class  full-screen-wrapper  gt       lt div class  center  gt        content lt  div gt   lt  div gt    full-screen-wrapper      position  fixed    display  flex    justify-content  center    width  100vw    height  100vh    top  0    align-items  center      center        your styles

User · Answer

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  gt  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

User · Answer

left  50   margin-left  -400px     Half of the width

[html] CSS horizontal centering of a fixed div?

Examples related to html

Examples related to css

Examples related to centering