Absolute Center (Vertical & Horizontal) an Image


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

From css-tricks.com


Copy this code and paste it in your HTML
  1. /* CSS background-image Technique */
  2.  
  3. html {
  4. width:100%;
  5. height:100%;
  6. background:url(logo.png) center center no-repeat;
  7. }
  8.  
  9. /* CSS + Inline Image Technique */
  10.  
  11. img {
  12. position: absolute;
  13. top: 50%;
  14. left: 50%;
  15. width: 500px;
  16. height: 500px;
  17. margin-top: -250px; /* Half the height */
  18. margin-left: -250px; /* Half the width */
  19. }
  20.  
  21. /* Table technique */
  22.  
  23. html, body, #wrapper {
  24. height:100%;
  25. width: 100%;
  26. margin: 0;
  27. padding: 0;
  28. border: 0;
  29. }
  30. #wrapper td {
  31. vertical-align: middle;
  32. text-align: center;
  33. }
  34.  
  35. /*
  36. <html>
  37. <body>
  38.   <table id="wrapper">
  39.   <tr>
  40.   <td><img src="logo.png" alt="" /></td>
  41.   </tr>
  42.   </table>
  43. </body>
  44. </html>
  45. /*

URL: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.