Posted By

stephcode on 03/10/11


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

wakeupandrage
maltem


I'll just leave this here. Centered Vertical and Horizontal


 / Published in: CSS
 

URL: http://www.pmob.co.uk/pob/vertical-center1.htm

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Centered Element of unknown height and width</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link href="main.css" rel="stylesheet" type="text/css" />
  7. <!--[if IE ]>
  8. <link href="iecss.css" rel="stylesheet" type="text/css" />
  9. <![endif]-->
  10.  
  11. <style type="text/css">
  12. * {margin:0;padding:0}
  13. /* mac hide \*/
  14. html,body{height:100%;width:100%;}
  15. /* end hide */
  16. body {
  17. text-align:center;
  18. min-height:468px;/* for ie7*/
  19. }
  20. #xouter{
  21. height:100%;
  22. width:100%;
  23. display:table;
  24. vertical-align:middle;
  25. }
  26. #xcontainer {
  27. text-align: center;
  28. position:relative;
  29. vertical-align:middle;
  30. display:table-cell;
  31. height: 468px;
  32. }
  33. #xinner {
  34. width: 552px;
  35. background:#fff;
  36. height: 468px;
  37. text-align: center;
  38. margin-left:auto;
  39. margin-right:auto;
  40. border:1px solid #000;
  41. }
  42. /* not required for demo */
  43. p,h1{margin-bottom:1em}
  44. #header{margin-right:0}
  45. .maintxt{text-align:left;margin:1em;}
  46. /* - */
  47. </style>
  48. <!--[if lt IE 8]>
  49. <style type="text/css">
  50. #xouter{display:block}
  51. #xcontainer{top:50%;display:block}
  52. #xinner{top:-50%;position:relative}
  53. </style>
  54. <![endif]-->
  55.  
  56. <!--[if IE 7]>
  57. <style type="text/css">
  58. #xouter{
  59. position:relative;
  60. overflow:hidden;
  61. }
  62. </style>
  63. <![endif]-->
  64.  
  65.  
  66.  
  67. </head>
  68. <body>
  69. <div id="xouter">
  70. <div id="xcontainer">
  71. <div id="xinner">
  72. <div id="header">
  73. <h1 id="logo"><a href="#index.htm">Raw CSS examples</a></h1>
  74. </div>
  75.  
  76. <h2>Centered Vertical and Horizontal</h2>
  77.  
  78. <p class="maintxt">Re-size the page smaller and larger to see the vertical and horizontal effect. As you can see the element does not disappear off the top or the side of the screen unlike most other centering methods. Works in all versions of IE and most other modern browsers.</p>
  79. <p>View Source to see the code</p>
  80. <p>Go back to <a href="hoz-vert-center.htm">Vertical centering</a></p>
  81. </div>
  82. </div>
  83. </div>
  84. </body>
  85. </html>

Report this snippet  

You need to login to post a comment.