Code Snippet

Home » Code Snippets » CSS » Absolute Center (Vertical & Horizontal) an Image

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>

Subscribe to The Thread

  1. Deigote

    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 :(

    Reply ↓
  2. Dyllon

    explination using google page translator.

    Reply ↓
  3. Helge-Kristoffer

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

    Reply ↓
  4. Eelco Deuling

    It’s explained in English here:

    http://www.wpdfd.com/editorial/thebox/deadcentre4.html

    Reply ↓
    • Jonathan Janssens

      This was exactly what I needed, thank you.

    • rajkamal

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

    • fahimshani

      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!

  5. Craig

    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

    Reply ↓
    • anon

      thanks, i agree with you, WHY

    • Dillon

      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.

  6. RK

    Thanks. This helped me a lot.

    Reply ↓
  7. Christina Bruun

    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 */
}
    Reply ↓
  8. Ganesh Kondalkar

    Hi,

    Thanks a lot frnd! :)

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

    Reply ↓
  9. Flaviu

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

    Reply ↓
  10. Mohd

    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!

    Reply ↓
  11. Ruven

    here is some div positioning i made some time ago, using this method.

    HTML

    CSS

    #beers_food /* wrapper */
    {
    width:700px;
    height:320px;
    margin: 0 auto;
    background-color:transparent;
    position:relative;
    }

    #beer
    {
    position:absolute;
    top:50%;
    right:0;
    margin-top:-115px;
    width:220px;
    height:230px;
    text-align:center;
    float:right;
    background-image:url("../images/bottomBut.png");
    border:1px solid #a73101;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius:20px ;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    box-shadow: 5px 5px 5px #000000;
    }

    #food
    {
    position:absolute;
    top:50%;
    left:50%;
    margin:-115px 0 0 -110px;
    width:220px;
    height:230px;
    text-align:center;
    color:white;
    float:right;
    background-image:url("../images/bottomBut.png");
    border:1px solid #a73101;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius:20px ;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    box-shadow: 5px 5px 5px #000000;
    }

    #shows
    {
    position:absolute;
    top:50%;
    left:0;
    margin-top:-115px;
    width:220px;
    height:230px;
    text-align:center;
    float:left;
    background-image:url("../images/bottomBut.png");
    border:1px solid #a73101;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius:20px ;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    box-shadow: 5px 5px 5px #000000;
    }

    very handy.


    Example

    Reply ↓
  12. suman

    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.

    Reply ↓
    • Jules

      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?

  13. man

    well done! TY!

    Reply ↓
  14. Swagato Bhatta

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

    Reply ↓
  15. Klaas

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

    Reply ↓
  16. Akmal Ritaudin

    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.

    Reply ↓
  17. Brett Alton

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

    Reply ↓
  18. mrityunjay

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

    Reply ↓
  19. buck

    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 :)

    Reply ↓
  20. Chris Janus

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~