Advanced Search

Absolute Center (Vertical & Horizontal) an Image

/ Published in: CSS
Save to your folder(s)
From css-tricks.com

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*CSS background-image Technique*/
  2. html { 
  3.    width:100%; 
  4.    height:100%; 
  5.    background:url(logo.png) center center no-repeat;
  6. }
  7.  
  8. /*CSS + Inline Image Technique*/
  9. img {
  10.    position: absolute;
  11.    top: 50%;
  12.    left: 50%;
  13.    width: 500px;
  14.    height: 500px;
  15.    margin-top: -250px; /* Half the height */
  16.    margin-left: -250px; /* Half the width */
  17. }

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.