Advanced Search

HTML Vertical Centering

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

Expand | Embed | Plain Text

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. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8. 	<title>untitled</title>
  9. 	<style type="text/css">
  10.  
  11. 	html, body {
  12. 		height: 100%; /* This value has to be set */
  13. 		margin: 0;
  14. 		padding: 0;
  15. 		}
  16.  
  17. 	div#shim {
  18. 		float: left;
  19. 		visibility: hidden;
  20. 		width: 100%;
  21. 		height: 50%;
  22. 		margin-top: -150px; /* This has to be half the height of the element you want to center */
  23. 		}
  24.  
  25. 	div#wrapper {
  26. 		clear: both; /* This value has to be set */
  27. 		width: 500px;
  28. 		height: 300px; /* Need to specify a height */
  29. 		background: #ffc;
  30. 		margin: 0 auto; /* This centres horizontally */
  31. 		}
  32.  
  33. 	</style>
  34. </head>
  35.  
  36. <body>
  37.  
  38. <div id="shim"></div>
  39. <div id="wrapper">
  40. 	<p>This is my centred web page.</p>
  41. </div>
  42.  
  43. </body>
  44. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.