Center div on the middle of screen

Question

What is the best pattern to align a semantic ui grid in the middle of the screen   the css for this will ideal be this one    div      position  absolute      top  50       left  50       margin-top  -50px      margin-left  -50px      width  100px      height  100px      But on semantic this dont look well with grids   This is part of my html     lt div class  ui grid container  gt       lt div class  ui center aligned three column grid  gt         lt div class  column  gt         lt  div gt         lt div class  column  gt           lt  div gt         lt  div gt     lt  div gt

User · Answer

2018  CSS3  div      position  absolute      top  50       left  50       margin-right  -50       transform  translate -50   -50        This is even shorter  For more information see this  CSS  Centering Things

User · Answer

Try this    div      position  absolute      top  50       left  50       margin-top  -50px      margin-left  -50px      width  100px      height  100px      background  red      Here div is html tag  You wrote a html tag followed by a dot that is wrong Only a class is written followed by dot

User · Answer

Your code is correct you just used  div instead of div  HTML   lt div class  ui grid container  gt   lt div class  ui center aligned three column grid  gt     lt div class  column  gt     lt  div gt     lt div class  column  gt       lt  div gt     lt  div gt      CSS  div  position  absolute  top  50   left  50   margin-top  -50px  margin-left  -50px  width  100px  height  100px      Check out this Fiddle

User · Answer

This should work with any div or screen size    x000D   x000D   center-screen   x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D    align-items  center  x000D    text-align  center  x000D    min-height  100vh  x000D    x000D    lt html gt  x000D    lt head gt  x000D    lt  head gt  x000D    lt body gt  x000D    lt div class  center-screen  gt  x000D   I m in the center x000D    lt  div gt  x000D    lt  body gt  x000D    lt  html gt  x000D   x000D   x000D    See more details about flex here  This should work on most of the browsers  see compatibility matrix here   Update  If you don t want the scroll bar  make min-height smaller  for example min-height  95vh

User · Answer

The best way to align a div in center both horizontally and vertically will be  HTML   lt div gt  lt  div gt    CSS   div       position  absolute      top 0      bottom  0      left  0      right  0      margin  auto      width  100px      height  100px      background-color  blue      FIDDLE

[css] Center div on the middle of screen

Examples related to css

Examples related to semantic-ui