Center a position fixed element

Question

I would like to make a position  fixed  popup box centered to the screen with a dynamic width and height  I used margin  5  auto  for this  Without position  fixed  it centers fine horizontally  but not vertically  After adding position  fixed   it s even not centering horizontally   Here s the complete set    x000D   x000D   jqbox innerhtml   x000D      position  fixed  x000D      width  500px  x000D      height  200px  x000D      margin  5  auto  x000D      padding  10px  x000D      border  5px solid  ccc  x000D      background-color   fff  x000D    x000D   lt div class  jqbox innerhtml  gt  x000D      This should be inside a horizontally x000D      and vertically centered box  x000D   lt  div gt  x000D   x000D   x000D    How do I center this box in screen with CSS

User · Answer

Try using this for horizontal elements that won't center correctly.

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

This one worked the best for me       display  flex      justify-content  center      align-items  center      position  fixed      left  0      top  0      width  100       height  100

User · Answer

This works wonderfully when you don t know the size of the thing you are centering  and you want it centered in all screen sizes   modal     position  fixed    width  90     height  90     top  5                 100 - height    2      left  5                100 - width    2

User · Answer

modal       display  flex      justify-content  space-around      align-items  center      position  fixed      left  0      top  0      width  100       height  100       inside it can be any element with diffenet width  height or without  all are centered

User · Answer

To fix the position use this    div       position  fixed      left  68       transform  translateX -8

User · Answer

Or just add left  0 and right  0 to your original CSS  which makes it behave similarly to a regular non-fixed element and the usual auto-margin technique works    jqbox innerhtml     position  fixed    width 500px    height 200px    background-color  FFF    padding 10px    border 5px solid  CCC    z-index 200    margin  5  auto    left  0    right  0      Note you need to use a valid  X HTML DOCTYPE for it to behave correctly in IE  which you should of course have anyway

User · Answer

What I use is simple  For example I have a nav bar that is position   fixed so I adjust it to leave a small space to the edges like this  nav   right  1   width  98   position  fixed  margin  auto  padding  0     The idea is to take the remainder percentage of the width  quot in this case 2  quot  and use the half of it

User · Answer

simple  try this position  fixed  width  500px  height  300px  top  calc 50  - 150px   left  calc 50  - 250px   background-color  red

User · Answer

This solution does not require of you to define a width and height to your popup div   http   jsfiddle net 4Ly4B 33   And instead of calculating the size of the popup  and minus half to the top  javascript is resizeing the popupContainer to fill out the whole screen      100  height  does not work when useing display table-cell   wich is required to center something vertically       Anyway it works

User · Answer

One possible answer    lt  DOCTYPE HTML gt   lt html gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt CSS Center Background Demo lt  title gt       lt style type  text css  gt          body               margin  0              padding  0                     div centred background stage 1               position  fixed              z-index  -1                top  45               left  50                      div centred background stage 2               position  relative              left  -50                top  -208px                   does not work                 According to the                http   reeddesign co uk test points-pixels html                6pt is about 8px                 In the case of this demo the background                text consists of three lines with                font size 80pt                  3 lines  with space between the lines                 times 80pt is about                 3  1 3  80pt  8px 6pt   416px                 50  from the 416px   208px                              text-align  left              vertical-align  top                      bells and wistles for the demo               font-family  monospace              font-size  80pt              font-weight  bold              color   E0E0E0                     div centred background foreground               z-index  1              position  relative                 lt  style gt   lt  head gt   lt body gt   lt div class  centred background stage 1  gt       lt div class  centred background stage 2  gt           lt div id  bells and wistles for the demo  gt              World lt br  gt              Wide lt br  gt              Web          lt  div gt       lt  div gt   lt  div gt   lt div class  centred background foreground  gt      This is a demo for  lt br  gt       lt a href  http   stackoverflow com questions 2005954 center-element-with-positionfixed  gt          http   stackoverflow com questions 2005954 center-element-with-positionfixed      lt  a gt       lt br  gt  lt br  gt       lt a href  http   www starwreck com   style  border  0px   gt           lt img src    star wreck in the perkinnintg jpg               style  opacity 0 1    gt       lt  a gt       lt br  gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

The only foolproof solution is to use table align center as in    lt table align center gt  lt tr gt  lt td gt   lt div gt       lt  div gt   lt  td gt  lt  tr gt  lt  table gt    I cannot believe people all over the world wasting these copious amount to silly time to solve such a fundamental problem as centering a div  css solution does not work for all browsers  jquery solution is a software computational solution and is not an option for other reasons   I have wasted too much time repeatedly to avoid using table  but experience tell me to stop fighting it  Use table for centering div  Works all the time in all browsers  Never worry any more

User · Answer

I want to make a popup box centered to the screen with dynamic width and height    Here is a modern approach for horizontally centering an element with a dynamic width - it works in all modern browsers  support can be seen here   Updated Example   jqbox innerhtml       position  fixed      left  50       transform  translateX -50        For both vertical and horizontal centering you could use the following   Updated Example   jqbox innerhtml       position  fixed      left  50       top  50       transform  translate -50   -50        You may wish to add in more vendor prefixed properties too  see the examples

User · Answer

I used vw  viewport width  and vh  viewport height   viewport is your entire screen  100vw is your screens total width and 100vh is total height     class name      width  50vw      height  50vh      border  1px solid red      position  fixed      left  25vw top  25vh

User · Answer

left  0  right  0    Was not working under IE7   Changed to   left auto  right auto    Started working but in the rest browsers it stop working  So used this way for IE7 below  if    browser msie  amp  amp  parseInt   browser version  10   lt   7                                      strAlertWrapper css  position  fixed   bottom  0   height  auto   left  auto   right  auto

User · Answer

Just add   left  calc -50vw   50    right  calc -50vw   50    margin-left  auto  margin-right  auto

User · Answer

Center fixed position element It will not limit centered element s width less than viewport width  when using margins in flexbox inside centered element  a very good solution by far  top  0  left  0  transform  translate calc 50vw - 50      Also for centering it vertically top  0  left  0  transform  translate calc 50vw - 50    calc 50vh - 50

User · Answer

Add a container like  div     position  fixed    bottom  0    left  0    width  100     text-align  center     Then put your box into this div will do the work  Edit  as mentioned in the comments  the inner content needs to be set to display  inline-block assuming there re two divs like       lt div class  quot outer quot  gt           lt div class  quot inner quot  gt               content goes here          lt  div gt       lt  div gt   Then the CSS for the inner needs to be       outer           position  fixed          text-align  center          left  0          right  0             inner           display  inline-block         Together with the outer div having a left  0  right 0  and text-align  center this will align the inner div centered  without explicitly specifying the width of the inner div

User · Answer

I just use something like this    c-dialogbox       --width   56rem      --height  32rem       position  fixed       width   var --width       height  var --height       left    calc    100  - var --width      2        right   calc    100  - var --width      2        top     calc    100  - var --height      2        bottom  calc    100  - var --height      2        It centers the dialog box both horizontally and vertically for me  and I can use different width and height to fit different screen resolutions to make it responsive  with media queries   Not an option if you still need to provide support for browsers where CSS custom properties or calc   are not supported  check on caniuse

User · Answer

You basically need to set top and left to 50  to center the left-top corner of the div  You also need to set the margin-top and margin-left to the negative half of the div s height and width to shift the center towards the middle of the div   Thus  provided a  lt  DOCTYPE html gt   standards mode   this should do   position  fixed  width  500px  height  200px  top  50   left  50   margin-top  -100px     Negative half of height     margin-left  -250px     Negative half of width       Or  if you don t care about centering vertically and old browsers such as IE6 7  then you can instead also add left  0 and right  0 to the element having a margin-left and margin-right of auto  so that the fixed positioned element having a fixed width knows where its left and right offsets start  In your case thus   position  fixed  width  500px  height  200px  margin  5  auto     Will not center vertically and won t work in IE6 7     left  0  right  0    Again  this works only in IE8  if you care about IE  and this centers only horizontally not vertically

User · Answer

You can basically wrap it into another div and set its position to fixed    x000D   x000D   bg   x000D    position  fixed  x000D    width  100   x000D    x000D   x000D   jqbox innerhtml   x000D    width  500px  x000D    height  200px  x000D    margin  5  auto  x000D    padding  10px  x000D    border  5px solid  ccc  x000D    background-color   fff  x000D    x000D   lt div class  bg  gt  x000D     lt div class  jqbox innerhtml  gt  x000D      This should be inside a horizontally and vertically centered box  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Center a position:fixed element

Examples related to css

Examples related to css-position

Examples related to centering