How to make text vertically and horizontally center in an HTML page

by

Centering horizontally is easy – centering vertically is a bit tricky in css as it’s not really supported (besides table cells <td>, which is bad style for layouting unless a table is really needed as – well – a table). But you can use semantically correct html tags and apply table display properties to it.

That’s one possible solution – there are many approaches, here is a good article on that.

In your case something like that should be sufficient:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Hello World</title>
        <style>

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        body {
            display: table;
        }

        .my-block {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
    <div class="my-block">
       WORD1<br />
       WORDWORDWORDWORD2
    </div>
    </body>
</html>

More Related Contents:

  1. `col-xs-*` not working in Bootstrap 4
  2. Can't get footer image to display in IE8?
  3. How to force child div to be 100% of parent div’s height without specifying parent’s height?
  4. SVG drop shadow using css3
  5. Switching the order of block elements with CSS [duplicate]
  6. Imitating a blink tag with CSS3 animations
  7. Unwanted margin in inline-block list items [duplicate]
  8. How can I force a long string without any blank to be wrapped?
  9. How to get a child element to show behind (lower z-index) than its parent?
  10. Background image not showing in Safari
  11. How to vertically align into the center of the content of a div with defined width/height?
  12. What is the performance impact of the universal selector?
  13. Allow specific tag to override overflow:hidden
  14. Place boxes inside ul in center, but align them left
  15. Aligning decimal points in HTML
  16. Why is nth-child selector not working?
  17. Can I nest button inside another button?
  18. HTML float right element order
  19. Add text above HTML5 Video
  20. How to get tiles centered and left-justified at the same time
  21. Bootstrap navbar: nothing is displayed on smaller devices
  22. Why does inline-block cause this div to have height?
  23. Text-align class for inside a table
  24. Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
  25. How can I increase a scrollbar’s width using CSS?
  26. How to float a div over Google Maps?
  27. Will targeting IE8 with conditional comments work?
  28. “break-inside: avoid-column” doesn’t work in Firefox
  29. Table vertical header?
  30. CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Leave a Comment