How to horizontal & vertical center a div [duplicate]

by

If you know the dimensions of the inner div you can use CSS.

#outer {
    position: relative;
}

#inner {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

There are other options using display: table-cell and vertical-align: middle, etc.

Other options include JavaScript to dynamically determine the dimensions of the inner div and set the negative margins like the previous answers.

More Related Contents:

  1. Centering a video in the middle of the page while having a side menu on the left. html/css
  2. Center a DIV horizontally and vertically [duplicate]
  3. Center aligning a fixed position div
  4. How to vertically center a inside a div? [duplicate]
  5. Center form submit buttons HTML / CSS
  6. Centering floating divs within another div
  7. How to center a (background) image within a div?
  8. How to center an unordered list?
  9. centering a div between one that’s floated right and one that’s floated left
  10. How to place a div over a image? [closed]
  11. Can’t scroll HTML page down to see full content
  12. What’s wrong with this div? [closed]
  13. How to Right-align flex item?
  14. flex container min-height ignored in IE
  15. float does not work in a flex container
  16. Is there a way to style part of an input field’s value? [duplicate]
  17. Css height in percent not working [duplicate]
  18. Circular percent progress bar
  19. CSS side by side div’s auto equal widths
  20. How to change color of disabled html controls in IE8 using css
  21. Printing HTML table with many columns/rows using CSS layout?
  22. Responsive tables, the smart way
  23. How to change the style of the title attribute inside an anchor tag?
  24. Best way to implement background image on HTML or body
  25. How to vertically align text with icon font?
  26. Css transition from display none to display block, navigation with subnav [duplicate]
  27. Is there a css selector for selecting an element futherup in the html?
  28. Responsive image align center bootstrap 3
  29. How can I align text directly beneath an image?
  30. How to center and crop an image to always appear in square shape with CSS?

Leave a Comment