Positioning div element at center of screen

Question

I want to position a  lt div gt   or a  lt table gt   element at the center of the screen irrespective of screen size  In other words  the space left on  top  and  bottom  should be equal and space left on  right  and  left  sides should be equal  I would like to accomplish this with only CSS   I have tried the following but it is not working     lt body gt     lt div style  top 0px  border 1px solid red   gt       lt table border  1  align  center  gt        lt tr height  100   gt         lt td height  100   width  100   valign  middle  align  center  gt          We are launching soon         lt  td gt        lt  tr gt       lt  table gt     lt  div gt    lt  body gt    Note  It is either way fine if the  lt div gt  element  or  lt table gt   scrolls with the website or not  Just want it to be centered when the page loads

User · Answer

Use flex  Much simpler and will work regardless of your div 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

User · Answer

If you have a fixed div just absolute position it at 50  from the top and 50  left and negative margin top and left of half the height and width respectively  Adjust to your needs   div       position  absolute      top  50       left  50       width  500px      height  300px      margin-left  -250px      margin-top  -150px

User · Answer

Now  is more easy with HTML 5 and CSS 3    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt TODO supply a title lt  title gt           lt meta charset  UTF-8  gt           lt meta name  viewport  content  width device-width  initial-scale 1 0  gt           lt style gt              body  gt  div                   position  absolute                  top  0                  bottom  0                  left  0                  right  0                  display  flex                  justify-content  space-around                  align-items  center                  flex-wrap  wrap                         lt  style gt       lt  head gt       lt body gt           lt div gt               lt div gt TODO write content lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

It will work for any object  Even if you don t know the size    centered     position  fixed    top  50     left  50     transform  translate -50   -50

User · Answer

With transforms being more ubiquitously supported these days  you can do this without knowing the width height of the popup   popup       position  fixed      top  50       left  50       -webkit-transform  translate -50   -50        transform  translate -50   -50        Easy  JSFiddle here  http   jsfiddle net LgSZV   Update  Check out https   css-tricks com centering-css-complete-guide  for a fairly exhaustive guide on CSS centering   Adding it to this answer as it seems to get a lot of eyeballs

User · Answer

The easy way  if you have a fixed width and height    divElement      position  absolute      top  50       left  50       margin-top  -50px      margin-left  -50px      width  100px      height  100px       Please don t use inline styles  Here is a working example http   jsfiddle net S5bKq

User · Answer

Another easy flexible approach to display block at center  using native text alignment with line-height and text-align   Solution    parent       line-height  100vh              text-align  center      child       display  inline-block      vertical-align  middle      line-height  100       And html sample    lt div class  parent  gt     lt div class  child  gt My center block lt  div gt   lt  div gt    We make div parent fullscreen  and his single child div child align as text with display  inline-block   Advantages    flexebility  no absolute values support resize works fine on mobile   Simple example on JSFiddle  https   jsfiddle net k9u6ma8g

User · Answer

Set the width and height and you re good   div     position  absolute    margin  auto    top  0    right  0    bottom  0    left  0    width  200px    height  200px      If you want the element dimensions to be flexible  and don t care about legacy browsers   go with XwipeoutX s answer

User · Answer

Alternative solution that doesn t use position absolute  I see a lot of position absolute answers  I couldn t use position absolute without breaking something else  So for those that couldn t as well  here is what I did  https   stackoverflow com a 58622840 6546317  posted in response to another question    The solution only focuses on vertically centering because my children elements were already horizontally centered but same could be applied if you couldn t horizontally center them in another way

User · Answer

I would do this in CSS   div centered     position  fixed     top  50     left  50     transform  translate -50   -50        then in HTML    lt div class  centered  gt  lt  div gt

User · Answer

try this   lt table style  height  100   left  0  position  absolute  text-align  center  width  100    gt    lt tr gt     lt td gt      lt div style  text-align  left  display  inline-block   gt      Your Html code Here     lt  div gt     lt  td gt    lt  tr gt   lt  table gt    Or this   lt div style  height  100   left  0  position  absolute  text-align  center  width  100   display  table  gt    lt div style  display  table-row  gt     lt div style  display  table-cell  vertical-align middle   gt      lt div style  text-align  left  display  inline-block   gt      Your Html code here     lt  div gt     lt  div gt    lt  div gt   lt  div gt

User · Answer

try this   width 360px  height 360px  top  50   left  50   margin-top  -160px         width   2     -1      margin-left  -160px         height   2     -1      position absolute

User · Answer

If there are anyone looking for a solution   I found this   Its the best solution i found yet   div     width  100px    height  100px    background-color  red    position  absolute    top 0    bottom  0    left  0    right  0    margin  auto      http   dabblet com gist 2872671  Hope you enjoy

[javascript] Positioning <div> element at center of screen

Examples related to javascript

Examples related to css

Examples related to html