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

User · Answer

This works regardless of the size of its contents

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

source: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

User · Answer

lt div id  container  gt       lt div id  some kind of popup  gt          center me      lt  div gt   lt  div gt    You d need to wrap it in a container  here s the css   container      position  fixed      top  100px      width  100       text-align  center     some kind of popup      display inline-block      width  90       max-width  900px        min-height  300px

User · Answer

This approach will not limit element s width when using margins in flexbox 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

You can center a fixed or absolute positioned element setting right and left to 0  and then margin-left  amp  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

User · Answer

Here s another method if you can safely use CSS3 s transform property    fixed-horizontal-center       position  fixed      top  100px     or whatever top you need        left  50       width  auto      -webkit-transform  translateX -50        -moz-transform  translateX -50        -ms-transform  translateX -50        -o-transform  translateX -50        transform  translateX -50           or if you want both horizontal AND vertical centering    fixed-center       position  fixed      top  50       left  50       width  auto      height  auto      -webkit-transform  translate -50  -50        -moz-transform  translate -50  -50        -ms-transform  translate -50  -50        -o-transform  translate -50  -50        transform  translate -50  -50

[css] Center fixed div with dynamic width (CSS)

Examples related to css

Examples related to html

Examples related to center