How to align entire html body to the center?

by

I just stumbled on this old post, and while I’m sure user01 has long since found his answer, I found the current answers don’t quite work. After playing around for a little bit using info provided by the others, I found a solution that worked in IE, Firefox, and Chrome. In CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

This is almost identical to abernier’s answer, but I found that including width would break the centering, as would omitting the auto margin. I hope anyone else who stumbles on this thread will find my answer helpful.

Note: Omit html, body { height: 100%; } to only center horizontally.

More Related Contents:

  1. How to choose right name for 2 same classes? [closed]
  2. Importing CSS and Bootsrap in HTML code
  3. flex property not working in IE
  4. How to vertically center a container in Bootstrap?
  5. Print page numbers on pages when printing html
  6. How to turn off word wrapping in HTML?
  7. Apply style to parent if it has child with CSS [duplicate]
  8. How can apply multiple background color to one div
  9. CSS strikethrough different color from text?
  10. Why doesn’t CSS ellipsis work in table cell?
  11. using text-align center in colgroup
  12. Difference between position:sticky and position:fixed?
  13. How to bevel the corner of a block div?
  14. CSS Float Logic
  15. How to create a Slanted Background with CSS? [duplicate]
  16. Centering floating divs within another div
  17. How to center div vertically inside of absolutely positioned parent div
  18. Detecting ‘transform: translate3d’ support
  19. Vertical Alignment of text in a table cell
  20. Responsive order confirmation emails for mobile devices?
  21. How to use an tag inside a in the middle of a text? [duplicate]
  22. CSS to line break before/after a particular `inline-block` item
  23. It is possible to expand a textarea only with CSS?
  24. How to apply padding to every line in multi-line text?
  25. Responsive CSS Circles
  26. Maintain image aspect ratio in carousel
  27. CSS Vertically & Horizontally Center Div [duplicate]
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment