Center an Image Vertically & Horizontally

Fundamental 92 views
0 Flares 0 Flares ×

CSS background-image Technique:

html { 
   background:url(logo.png) center center no-repeat;

CSS + Inline Image Technique:

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */

Table Technique:

html, body, #wrapper {
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
#wrapper td {
   vertical-align: middle;
   text-align: center;


   <table id="wrapper">
         <td><img src="logo.png" alt="" /></td>

You can also use the line-height method; just as you would to vertically align a single line of text.

Set the image’s container to a specific height and also give it a line-height with the same value as the height. Then give the image inside the container a display: inline-block or just inline.

If you also want the image to be centered, since it’s already got a display: inline, you can give the container a text-align: center which will make the image centered, too.

Provided by: CSS Tricks
Tagged with:
Posted in CSS


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.


Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×