Grow your CSS skills. Land your dream job.

Last updated on:

Absolute Center (Vertical & Horizontal) an Image

CSS background-image Technique:

html { 
   width:100%; 
   height:100%; 
   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 {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}
<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="logo.png" alt="" /></td>
      </tr>
   </table>
</body>
</html>

Comments

  1. Permalink to comment#

    It’s also possible to do it using div’s and CSS without using px sizes or tables:

    <div class="contendor" style="border: 1px solid green; margin: 0; padding: 0; display: table">
    <div class="contendor-secundario" style="border: 1px solid yellow; margin: 0; padding: 0; display: table-row">
    <div class="columna1" style="border: 1px solid red; margin: 0pt; padding: 0pt; vertical-align: middle; display: table-cell">columna uno</div>
    <div class="columna2" style="border: 1px solid blue; margin: 0; padding: 0; display: table-cell">columna dos,
    la cual es bastante
    más alta que la anterior,
    y además la podemos hacer
    todavía más alta
    y la columna 1 ya no se centra</div>
    </div>
    </div>

    It’s explained here, but in spanish :(

    • Jason Goemaat
      Permalink to comment#

      You could use flex (fiddle):

      div.horizontal {
          display: flex;
          justify-content: center;
      }
      
      div.vertical {
          display: flex;
          flex-direction: column;
          justify-content: center;
      }
      
      
      <div class="horizontal div1">
          <div class="vertical">
              <img src="https://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=200&r=pg&d=mm"/>
          </div>
      </div>
      
  2. This is called “The dead center”, or am I wrong?

    • This was exactly what I needed, thank you.

    • rajkamal
      Permalink to comment#

      i was seeing the example, will these work (?) if the container has some margin top.

    • fahimshani
      Permalink to comment#

      good one! but the problem is that if you re size the browser you can’t scroll to the top. i.e if i have a menu on top i cant view it!

  3. Craig
    Permalink to comment#

    Why does everyone in the universe write background shorthand wrong?

    This is the correct way and the only way that works in ALL browsers that support background shorthand:

    background: #FFF url() repeat fixed left top;

    /rant

    • anon
      Permalink to comment#

      thanks, i agree with you, WHY

    • Dillon
      Permalink to comment#

      Craig, syntactically, you can have your properties in any arrangement:

      background: #fff url() fixed left top;

      is essentially the same as

      background: url() fixed 0 0 #fff;

      either way you look at it, it’s doing the same exact thing.

  4. RK
    Permalink to comment#

    Thanks. This helped me a lot.

  5. Brillant!!

    /* logo */
    
    .logo {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 828px;
       height: 104px;
       margin-top: -52px; /* Half the height */
       margin-left: -414px; /* Half the width */
    }
    • Right? I love this. This made me so happy:

      #arrr{ position:absolute; top:0; left:0; width:100%; height:100%;}
      #black-flag { position:absolute; left:50%; bottom:145px;}
      #black-flag img{ position:fixed; margin-left:470px;}
      

      Vertical and right aligned fixed div relative to viewport! #fuckyeah!

    • Iicee
      Permalink to comment#

      With FF, no fixed image size:

       
      
       .container {
          text-align:center;
          height:50%;
       }
       .container img {
          position:relative;
          top:25%;
       }
      
      

      IE does not understand ‘top’ in %… :(

  6. Ganesh Kondalkar
    Permalink to comment#

    Hi,

    Thanks a lot frnd! :)

    I was searching for the same thing from a long time and now I got the one…

  7. Permalink to comment#

    Thanks all for the trick.. I was searching for that for some time..

  8. Mohd
    Permalink to comment#

    YOU ARE A KING MAN

    I would advice THIS PAGE for anyone whos searching for a solution regarding absolute centering of Image inside a DIV.

    WOOOOW!

  9. suman
    Permalink to comment#

    what happen when you have different image size but whatever the image sizes you want all them in center. normally in jquery gallery case. i am struggling with this one from last two days. any help will be highly appreciated.

    • Jules
      Permalink to comment#

      ummm hmmm only javascipt can probably do that i think maybe? O.o
      something like:

      
      document.getElementById('myimage').style.margin-top = document.getElementById('myimage').style.height / 2; 
      document.getElementById('myimage').style.margin-left = document.getElementById('myimage').style.width/ 2; 

      should center an image with id=”myimage”
      given an absolute position of :

      
      top = 50%;
      left = 50%;
      

      and if you wanted to do a bunch of them you would have to make an array maybe and cycle through them? O.o

      anyone else?

  10. man
    Permalink to comment#

    well done! TY!

  11. Swagato Bhatta
    Permalink to comment#

    Hi there
    May I know how you made this website? The layout is just awesome

  12. Klaas
    Permalink to comment#

    ???
    What about a pure CSS solution for vertically centering an image in a div that is POSITION:FIXED
    ???
    Thanks a lot!

  13. Hi, I have posted about 50 post to my blog. Now I have to change my template blog with a new one. I have upload the picture too.
    The problem with my new template is my picture that I have uploaded before its not in the position I wanted. I have to re-upload the picture so its fix to my new template. Is there any can help me with this. So the picture that I have upload before its force to (300X300 pixel). Thank you before.

  14. Brett Alton
    Permalink to comment#

    What do you do when the size of the image is unknown?

  15. Good attempt to make new people love css.Keep it up!

  16. buck
    Permalink to comment#

    I LOVE YOU!! Ahem, thanks heaps. I was trying to figure out how to place a graphic using absolute position on a centered body container. I realized you made the graphic centered by ‘left: 50%’ and then using my container width I divided by 2 and altered the measurements to get a perfect fit ;). ‘left: 50%’ is a very important element when using absolute position. Dammit, if I only knew this before then I wouldn’t change my design and css code :(. Oh well, you live and learn :D

    Thanks again and much appreciated.
    CHEERS :)

  17. Chris Janus
    Permalink to comment#

    ah – some very handy tricks which definitely helped me out. thanks for sharing!

  18. Jan K
    Permalink to comment#

    I want an image in the background of my webpage (top center). Different image on every page.
    On top of that I want to have a 1000px wide Div in the center of the page with the content.
    I want it all to stay in the middle when I resize the browser-window.
    How?

  19. Sreevisakh
    
    position: relative;
    top: 50%;
    margin-top: -25%;
    

    This worked for me to align vertically center. I can’t use half height bacuase i dont know the height. So i used percentage

  20. Saw this one recently:

    .container {
    	position: relative;
    }
    img {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    	margin: auto;
    }
    
    • Adam Cheng
      Permalink to comment#

      This one is awesome for image tag.

    • janis
      Permalink to comment#

      this one works.. but you have to put a height in the container . that’s bad for me then..

    • janis
      Permalink to comment#

      my solution works in ie8

      img{display: block; margin: 0 auto;}

    • Roxanne
      Permalink to comment#

      Thank you, Matthew Buchanan! This is perfect — nice and clean, and works for varying image sizes. It works for me in Firefox, Chrome, Safari, Opera, and IE 8 and 9.

    • That’s a new one on me, and incredibly helpful. I wonder why it works?

    • In love with Matt
      Permalink to comment#

      This is awesome!

    • Mighty
      Permalink to comment#

      Hey Matthew it worked for me to center image both vertically and horizontally within a container. Thanks :)

  21. This is my idea for this

    @charset "utf-8";
    /* CSS Document */
    
    * {
    	margin:0;
    	padding:0;
    }
    html, body {
    	height: 100%;
    	min-height:100% !important;
    	width:100%;
    }
    #cuerpo {
    	position:absolute;
    	top: 50%; /*esta a la mitad*/
    	margin-top: -25%; /*le resta la mitad del alto*/
    	width: 700px;
    	height: 500px;
    width: 100%;
    }
    #header {
    	position:relative;
    	margin: 0 auto 0 auto;
    	width: 700px;
    	height: 106px;
    	background:#09F;
    }
    #contenido {
    	position:relative;
    	margin: 0 auto 0 auto;
    	width: 700px;
    	height: 394px;
    	overflow: auto;
    	background:#F9F;
    	
    }
  22. Thanks for the tutorial, I am trying to place a paragraph below the centralised image, but when I do this the paragraph remains at the top left hand side of the browser window.

    Is there a way around this?

  23. seasparrow
    Permalink to comment#

    Based on Chris’ table approach, this worked great for me…

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

    .content {
    width: 600px;
    height: 400px;
    background-color: red;
    margin-left: auto;
    margin-right: auto;
    }

    And the html…

    <table id=”wrapper”>
    <tr>
    <td>
    <div class=”content”>content…</div>
    </td>
    </tr>
    </table>

  24. Great article! I love your site, it’s bookmarked : )
    I use your method of absolute centering in all my websites.

  25. /* Make the height 100% */
    #container ul li{
    display:inline-block;
    height:100%;
    }
    /* Then vertical-align the crap outta it */
    #container ul li img{
    vertical-align:middle;
    }
    /* NOTE: The images don’t have fixed sizes either :) This works in Firefox, been using it for a while so I must have cross browser tested it but can’t remember anymore. Give it go! */

  26. Noname
    Permalink to comment#

    Better and complete: style for a extensible box with title text and one image inside.
    The position: relative and the width are not an obligation.

    div.frameStretch {color: #061f4e; font-family: “mafonte”, Times New Roman, Times, serif; font-weight: normal; line-height: 1.35; text-align: justify; margin-right: auto; margin-left: auto; padding: 4px 8px; position: relative; top: 32px; width: 832px; overflow: hidden; border-width: 24px;
    -moz-border-image: url(yourimageborder.png) 24 stretch; -moz-border-radius: 24px;
    -webkit-border-image: url(yourimageborder2.png) 24 stretch; -webkit-border-radius: 24px;
    -o-border-image: url(.yourimageborder.png) 24 stretch; -o-border-radius: 24px;
    -ms-border-image: url(yourimageborder.png) 24 stretch; -ms-border-radius: 24px;
    border-image: url(yourimageborder.png) 24 fill stretch; border-radius: 24px;
    box-pack: center; box-shadow: 0px 1px 3px #122c53; text-shadow: -1px -1px 1px #cccccc, 1px 1px 1px #ffffff;}

    /* — For the title in the box — */
    div.frameStretch h2 {font-size: 36px; font-weight: bold; line-height: 24px; margin: 0; padding: 0 0 12px;}
    /* — To one image inside, vertical align, at right of the box —*/
    div.frameStretch img {list-style-position: inside; display: block; margin-top: auto; margin-right: -10px; margin-bottom: auto; padding: 8px 0 8px 8px; position: relative; right: 0; width: 240px; height: 238px; float: right; vertical-align: middle; border-style: none;}

  27. mem
    Permalink to comment#

    That background image is simply a brilliant kiss technique.

    Just wanted to drop a line, to say thanks a lot for this and so many other useful posts.

  28. Hello,

    it’s uses basically a how center images , and it can take a server timestamp to start with. The css can also be easily modified to one’s own likings.

    http://www.phphunt.com/111/how-to-center-images

  29. Permalink to comment#

    Hi Chris – or any genius out there, is there a “responsive” way of doing this? So when you resize your browser using “img{max-width:100%;height:auto}” for the images to resize, is there a way to center it inside a div both vertically and horizontally?

  30. Nader dabit
    Permalink to comment#

    Thank you!

  31. Connect
    Permalink to comment#

    is this supported in IE 7, IE6?

  32. Permalink to comment#

    Hi.. Thanks for the tut. I have been referring to css-tricks.com for a ling time for all sorts of different things, and as a developer, your site has been a great resource and helps speed up development of some of my projects. So big thumbs up! :)

  33. Permalink to comment#

    thx !

  34. Permalink to comment#

    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.

    Blamo!

  35. Mandy
    Permalink to comment#

    Thanks a lot, this worked!

  36. Permalink to comment#

    .Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    }

  37. tohid
    Permalink to comment#

    veeeeeeeeeeeeeeeeery nice
    thank you. ;)

  38. Mr. T
    Permalink to comment#

    This help me a lot. Many thanks!

  39. Dr. Stefan Gruenwald
    Permalink to comment#

    I always use:

    img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    • Shohaib
      Permalink to comment#

      Yes, Same to you. I think this is very nice.

      img.center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      }

  40. Permalink to comment#

    Hardcore table emulator :D ( demo )

    dl.table {
            xtable-layout: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    
        dl.table,
        dd.tcell {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }
    
            dl.table {
                display: table;
            }
    
            dd.tcell {
                display: table-cell;
            }
    
            .huerga {
                               /* ограничитель */
                               width: 700px;
                               height: 428px;
                overflow: scroll;
            }
    
            .huerga .ololo {
                display: table;
                width: 100%; 
                height: 100%;
            }
    
            .huerga .trololo {
                display: table-cell;
                vertical-align: middle;
            }
    
    /* huergator */
    .huergator {
        display: inline-block;
        width: 400px; 
        height: 400px; 
        background: #f00000
    }
    
    
                <dl class="table">
    
                    <!-- left column -->
                    <dd class="tcell">      
                        <div class="left">          
                        </div>
                    </dd><!-- #left column -->
    
                    <!-- center column -->
                    <dd class="tcell" style="width: 100%; vertical-align: middle;">
    
                        <div class="center">
                            <div class="huergator"></div>
                        </div>
    
                    </dd><!-- #center column -->
    
    
                </dl>
    
    
    
    <script type="text/javascript">
    
        (function ($) {
            $('.huergator').wrap('<center class="huerga"><div class="ololo"><div class="trololo" />"');
        })(jQuery);
    
    
    </script>
    
  41. Anand
    Permalink to comment#

    img.center {
    display: block;
    margin-left:auto;
    margin-right:auto;
    margin-top:2px;
    margin-bottom: 2px;
    padding: 2px;
    }

  42. Mujahid
    Permalink to comment#

    This also will work

    .element{
        width: 32px;
        height: 32px;
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    
  43. Daniel Olson
    Permalink to comment#

    Here’s a LESS version of the inline technique I’ve been using. Edit the first height / width and let LESS do the rest!

    .logo {
        @logo-height: 60px;
        @logo-width: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        width: @logo-width;
        height: @logo-height;
        margin-left: -(@logo-width / 2);
        margin-top: -(@logo-height / 2);
    }
    
    • Daniel Olson
      Permalink to comment#

      Here’s an even simpler mixin version that I’ve used for just vertically centering elements.

      Start with a default like so. In my case I set it to 120px.

      .vertically-center(@element-height: 120px) {
              position: absolute;
              top: 50%;
              height: @element-height;
              margin-top: -(@element-height / 2);
          }
      

      Then you can adjust the height as needed.
      .vertically-center(80px);

  44. I have tried it over one of my project and found that if i use html5 doctype than your css background-image technique wont work in chrome. I have to remove the html5 doctype for working.

  45. Hani
    Permalink to comment#

    Best practices Chris :)
    These solution depends on ux, as my observation this xperience for under construction page. And your this technique is best practice for it:

    html {
    width:100%;
    height:100%;
    background:url(logo.png) center center no-repeat;
    }

    One my calculated suggestion image size should 206px square because this will works responsively as well :)

    Here is my technique for text content but not for lt ie8:

    html, body{ width:100%; height:100%; margin:0}
    body{ display:table;}
    div{ display:table-cell; vertical-align:middle; text-align:center}
    
  46. Charlie
    Permalink to comment#

    I have found that this CSS seems to do the job, it works when you replace the dimensions of the image class with percentages rather than pixels, it seems to work out the actual pixels itself, it’s quite simple:

    .container {
    text-align: center;
    width: WHATEVER.px;
    height: WHATEVER.px;

    }

    .image {
    width: 80%;
    height: 80%;
    position: relative;
    top: 10%
    }

    There is little math behind it, simply make the top percentage half of whatever you take off the height, in my case I subtracted 20% meaning the top position is 10%. I don’t know if it will work correctly for everybody’s desires, but I have had no problems with it since!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".