Advanced Search

CSS Centering an Image (Vertical & Horizontal)

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

Expand | Embed | Plain Text

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.  
  10. // CSS + Inline Image Technique:
  11.  
  12. img {
  13.    position: absolute;
  14.    top: 50%;
  15.    left: 50%;
  16.    width: 500px;
  17.    height: 500px;
  18.    margin-top: -250px; /* Half the height */
  19.    margin-left: -250px; /* Half the width */
  20. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.