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;
}
<table id="wrapper">
  <tr>
    <td><img src="logo.png" alt="" /></td>
  </tr>
</table>

Comments

  1. User Avatar
    Deigote
    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 :(

    • User Avatar
      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>
      
    • User Avatar
      Sajjad Ahmad
      Permalink to comment#

      But the flex prooerty does not support on IE versions

  2. User Avatar
    Helge-Kristoffer
    Permalink to comment#

    This is called “The dead center”, or am I wrong?

  3. User Avatar
    Eelco Deuling
    Permalink to comment#
    • User Avatar
      Jonathan Janssens
      Permalink to comment#

      This was exactly what I needed, thank you.

    • User Avatar
      rajkamal
      Permalink to comment#

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

    • User Avatar
      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!

  4. User Avatar
    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

    • User Avatar
      anon
      Permalink to comment#

      thanks, i agree with you, WHY

    • User Avatar
      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.

    • User Avatar
      bikal
      Permalink to comment#

      nice information, thanks!

  5. User Avatar
    RK
    Permalink to comment#

    Thanks. This helped me a lot.

  6. User Avatar
    Christina Bruun
    Permalink to comment#

    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 */
    }
    • User Avatar
      Rick Davies
      Permalink to comment#

      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!

    • User Avatar
      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 %… :(

  7. User Avatar
    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…

  8. User Avatar
    Flaviu
    Permalink to comment#

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

  9. User Avatar
    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!

  10. User Avatar
    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.

    • User Avatar
      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?

  11. User Avatar
    man
    Permalink to comment#

    well done! TY!

  12. User Avatar
    Swagato Bhatta
    Permalink to comment#

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

  13. User Avatar
    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!

  14. User Avatar
    Akmal Ritaudin
    Permalink to comment#

    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.

  15. User Avatar
    Brett Alton
    Permalink to comment#

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

  16. User Avatar
    mrityunjay
    Permalink to comment#

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

  17. User Avatar
    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 :)

  18. User Avatar
    Chris Janus
    Permalink to comment#

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

  19. User Avatar
    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?

  20. User Avatar
    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

  21. User Avatar
    Matthew Buchanan

    Saw this one recently:

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

      This one is awesome for image tag.

    • User Avatar
      janis
      Permalink to comment#

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

    • User Avatar
      janis
      Permalink to comment#

      my solution works in ie8

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

    • User Avatar
      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.

    • User Avatar
      Will Fastie
      Permalink to comment#

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

    • User Avatar
      In love with Matt
      Permalink to comment#

      This is awesome!

    • User Avatar
      Mighty
      Permalink to comment#

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

    • User Avatar
      Travis
      Permalink to comment#

      Flawless! Thanks Matthew!

    • User Avatar
      Marko
      Permalink to comment#

      Bravo Matthew

      and thank you.

  22. User Avatar
    Dante
    Permalink to comment#

    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;
    	
    }
  23. User Avatar
    Darrenj
    Permalink to comment#

    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?

  24. User Avatar
    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>

  25. User Avatar
    Alex S.
    Permalink to comment#

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

  26. User Avatar
    Bryan
    Permalink to comment#

    /* 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! */

  27. User Avatar
    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;}

  28. User Avatar
    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.

  29. User Avatar
    hudson kotel
    Permalink to comment#

    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

  30. User Avatar
    LNV
    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?

  31. User Avatar
    Nader dabit
    Permalink to comment#

    Thank you!

  32. User Avatar
    Connect
    Permalink to comment#

    is this supported in IE 7, IE6?

  33. User Avatar
    Eoin H
    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! :)

  34. User Avatar
    Nico
    Permalink to comment#

    thx !

  35. User Avatar
    Mark
    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!

  36. User Avatar
    Mandy
    Permalink to comment#

    Thanks a lot, this worked!

  37. User Avatar
    jasonw
    Permalink to comment#

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

  38. User Avatar
    tohid
    Permalink to comment#

    veeeeeeeeeeeeeeeeery nice
    thank you. ;)

  39. User Avatar
    Mr. T
    Permalink to comment#

    This help me a lot. Many thanks!

  40. User Avatar
    Dr. Stefan Gruenwald
    Permalink to comment#

    I always use:

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

    • User Avatar
      Shohaib
      Permalink to comment#

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

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

  41. User Avatar
    Zen
    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>
    
  42. User Avatar
    Anand
    Permalink to comment#

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

  43. User Avatar
    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;
    }
    
  44. User Avatar
    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);
    }
    
    • User Avatar
      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);

  45. User Avatar
    Vivek Moyal
    Permalink to comment#

    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.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      The HTML5 doctype is definitely not the problem. There is something else going on there.

  46. User Avatar
    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}
    
  47. User Avatar
    IJas
    Permalink to comment#
  48. User Avatar
    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!

  49. User Avatar
    Costas
    Permalink to comment#

    Check out this animated, scriptless gallery demo that applies these principles to images of varying sizes, without specifying size:

    Scriptless css-only gallery

  50. User Avatar
    Hari
    Permalink to comment#

    The best of the solutions are the simplest. Awesome. Thank you.

  51. User Avatar
    Nick G
    Permalink to comment#

    img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }

  52. User Avatar
    Satya
    Permalink to comment#

    .container{width:300px; border:1px solide #000; text-align:center; vertical-align:middle;}

    .container:before{height:100%; display:inline-block; content:””; text-align:center; vertical-align:middle;}

    it will work in all browser.

  53. User Avatar
    Server
    Permalink to comment#

    .image-center {
    text-align: center;
    }
    .image-center:before {
    content:”;
    width: 1px;
    height: 100%;
    }
    .image-center:before,
    .image-center img {
    display: inline-block;
    vertical-align: top;
    margin-right: -5px;
    }

  54. User Avatar
    Ahesanali Suthar

    Nice post.

    CSS background-image Technique: works for me.

    I am designing i card for a library and i have to set logo in background in i-card.

    Many many thanks for posting.

  55. User Avatar
    shalini
    Permalink to comment#

    I have a image div on right and text div on left, i need text to
    Align the text in the center of image section.

    try to guide me how to do

  56. User Avatar
    guruquest
    Permalink to comment#

    It is a really great article about image and text alignment in the horizontal and vertical middle.
    Here I am given small example for image and text align middle in div

  57. User Avatar
    Robert
    Permalink to comment#

    Just use change width and height, remove ‘bottom’ or whatever to stick it to a side.
    Update your answer or get a job at McDonalds.
    #element {
    position: absolute;
    margin: auto;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    width: 960px;
    height: 450px;
    }

  58. User Avatar
    lvivduncan
    Permalink to comment#

    *{padding:0; margin:0;}
    html{ height: 100vh; width:100%; display:table;}
    body{ height: 100vh; width:100%; display: table-cell; vertical-align: middle; text-align: center; font-family: ‘Roboto Condensed’, sans-serif; font-weight: 400; font-size: 20px;}

    Text

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag