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;
    }

  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}
    

Leave a Comment

Current day month ye@r *

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