center aligning a fixed position div

Question

I m trying to get a div that has position fixed center aligned on my page   I ve always been able to do it with absolutely positioned divs using this  hack   left  50   width  400px  margin-left -200px      where the value for margin-left is half the width of the div   This doesn t seem to work for fixed position divs  instead it just places them with their left-most corner at 50  and ignores the margin-left declaration   Any ideas of how to fix this so I can center align fixed positioned elements   And I ll throw in a bonus M amp M if you can tell me a better way to center align absolutely positioned elements than the way I ve outlined above

User · Answer

This works if you want the element to span across the page like another navigation bar.

width: calc (width: 100% - width whatever else is off centering it)

For example if your side navigation bar is 200px:

width: calc(100% - 200px);

User · Answer

if you don t want to use the wrapper method  then you can do this    fixed center div     position  fixed    width  200px    height  200px    left  50     top  50     margin-left  -100px     50  of width      margin-top  -100px     50  of height

User · Answer

Koen s answer doesn t exactly centers the element   The proper way is to use CCS3 transform property  Although it s not supported in some old browsers  And we don t even need to set a fixed or relative width    centered       position  fixed      left  50       transform  translate -50   0       Working jsfiddle comparison here

User · Answer

Normal divs should use margin-left  auto and margin-right  auto  but that doesn t work for fixed divs  The way around this is similar to Andrew s answer  but doesn t use the deprecated  lt center gt  thing  Basically  just give the fixed div a wrapper    x000D   x000D   wrapper   x000D      width  100   x000D      position  fixed  x000D      background  gray  x000D    x000D   fixed div   x000D      margin-left  auto  x000D      margin-right  auto  x000D      position  relative  x000D      width  100px  x000D      height  30px  x000D      text-align  center  x000D      background  lightgreen  x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  fixed div  gt  lt  div gt  x000D   lt  div x000D   x000D   x000D    This will center a fixed div within a div while allowing the div to react with the browser  i e  The div will be centered if there s enough space  but will collide with the edge of the browser if there isn t  similar to how a regular centered div reacts

User · Answer

You could use flexbox for this as well    x000D   x000D   wrapper   x000D    position  fixed  x000D    top  0  x000D    left  0  x000D    height  100   x000D    width  100   x000D     x000D       this is what centers your element in the fixed wrapper   x000D    display  flex  x000D    flex-flow  column nowrap  x000D    justify-content  center     aligns on vertical for column    x000D    align-items  center     aligns on horizontal for column    x000D     x000D       just for styling to see the limits    x000D    border  2px dashed red  x000D    box-sizing  border-box  x000D    x000D   x000D   element   x000D    width  200px  x000D    height  80px  x000D   x000D       Just for styling    x000D    background-color  lightyellow  x000D    border  2px dashed purple  x000D    x000D   lt div class  wrapper  gt   lt  -- Fixed element that spans the viewport -- gt  x000D     lt div class  element  gt Your element lt  div gt   lt  -- your actual centered element -- gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For the ones having this same problem  but with a responsive design  you can also use    width  75   position  fixed  left  50   margin-left  -37 5     Doing this will always keep your fixed div centered on the screen  even with a responsive design

User · Answer

If you know the width is 400px this would be the easiest way to do it I guess    left  calc 50  - 200px

User · Answer

It is quite easy using      width  70       left 15    Sets the element width to 70  of the window and leaves 15  on both sides

User · Answer

Center it horizontally  display  fixed  top  0   left  0  transform  translate calc 50vw - 50      Center it horizontally and vertically  display  fixed  top  0   left  0  transform  translate calc 50vw - 50    calc 50vh - 50      No side effect  It will not limit element s width when using margins in flexbox

User · Answer

lt div class  container-div  gt     lt div class  center-div  gt      lt  div gt   lt  div gt    container-div  position fixed  left  0  bottom  0  width  100   margin  0    center-div  width  200px  margin  0 auto     This should do the same

User · Answer

A solution using flex box  fully responsive   parent div       position  fixed      width  100       display  flex      justify-content  center     child div          whatever you want

User · Answer

I used the following with Twitter Bootstrap  v3    lt footer id  colophon  style  position  fixed  bottom  0px  width  100    gt       lt div class  container  gt           lt p gt Stuff - rows - cols etc lt  p gt       lt  div gt   lt  footer gt    I e make a full width element that is fixed position  and just shove a container in it  the container is centered relative to the full width  Should behave ok responsively too

User · Answer

If you want to center aligning a fixed position div both vertically and horizontally use this  position  fixed  left  50   top  50   transform  translate -50  -50

User · Answer

From the post above  I think the best way is    Have a fixed div with width  100  Inside the div  make a new static div with margin-left  auto and margin-right  auto  or for table make it align  center   Tadaaaah  you have centered your fixed div now   Hope this will help

[html] center aligning a fixed position div

Examples related to html

Examples related to center

Examples related to alignment

Examples related to css-position