How to put a div in center of browser using CSS

Question

How to put a div in center of browser both vertically and horizontally using CSS only   Make sure it works on IE7 too   If everything fails  we may use JavaScript  but a last choice

User · Answer

For Older browsers  you need to add this line on top of HTML doc   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt

User · Answer

margin  auto

User · Answer

center     margin  auto    margin-top  15vh      Should do the trick

User · Answer

lt center gt           lt h3  gt  your div goes here  lt  h3 gt           lt  center gt

User · Answer

lt html gt   lt head gt   lt style gt          margin 0      padding 0     html  body       height 100       distance       width 1px      height 50       margin-bottom -300px      float left       something       position relative      margin 0 auto      text-align left      clear left      width 800px      min-height 600px      height auto      border  solid 1px  993333      z-index  0        for Internet Explorer      html  something  height  600px     lt  style gt    lt  head gt   lt body gt    lt div id  distance  gt  lt  div gt    lt div id  something  gt   lt  div gt   lt  body gt    lt  html gt    Tested in FF2-3  IE6-7  Opera and works well

User · Answer

You can also set your div with the following    something  width  400px  margin  auto     With that setting  the div will have a set width  and the margin and either side will automatically set depending on the with of the browser

User · Answer

HTML    lt div id  something  gt     content     lt  div gt    CSS    something       position  absolute      height  200px      width  400px      margin  -100px 0 0 -200px      top  50       left  50

User · Answer

The simplest solution is just to use an auto margin  and give your div a fixed width and height  This will work in IE7  FF  Opera  Safari  and Chrome   HTML    lt body gt     lt div class  centered  gt     lt  div gt   lt  body gt    CSS   body   width  100   height  100   margin  0px  padding  0px      centered       margin  auto      width  400px      height  200px      EDIT   Sorry  I just noticed you said vertically   the default  auto  margin for top and bottom is zero   so this will only center it horizontally  The only solution to position vertically and horizontally is to muck around with negative margins like the accepted answer

User · Answer

Using this   center-div   margin  auto  position  absolute  top  50   left  50   bottom  0  right  0  transform  translate -50  -50

User · Answer

try this   center div          margin  auto         position  absolute         top  0          left  0         bottom  0          right  0

[css] How to put a div in center of browser using CSS?

Examples related to css

Examples related to layout