Advanced Search

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

/ Published in: CSS
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" "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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.