HTML Vertical Centering


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.  
  7. <title>untitled</title>
  8. <style type="text/css">
  9.  
  10. html, body {
  11. height: 100%; /* This value has to be set */
  12. margin: 0;
  13. padding: 0;
  14. }
  15.  
  16. div#shim {
  17. float: left;
  18. visibility: hidden;
  19. width: 100%;
  20. height: 50%;
  21. margin-top: -150px; /* This has to be half the height of the element you want to center */
  22. }
  23.  
  24. div#wrapper {
  25. clear: both; /* This value has to be set */
  26. width: 500px;
  27. height: 300px; /* Need to specify a height */
  28. background: #ffc;
  29. margin: 0 auto; /* This centres horizontally */
  30. }
  31.  
  32. </style>
  33. </head>
  34.  
  35.  
  36. <div id="shim"></div>
  37. <div id="wrapper">
  38. <p>This is my centred web page.</p>
  39. </div>
  40.  
  41. </body>
  42. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.