Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?

Question

If I have a fixed sized container div, and an unknown sized image, how do I horizontally and vertically center it?

• using pure css
• using JQuery if css can't do it

This answer makes sense for fixed width images, but not variable ones.

Something like this structure (I have in mind item renderers similar to these in the list, but where the image on the left wouldn't always be the same size:

<ul id="gallery">
    <li id="galleryItem1">
        <div class="imageContainer">
            <img src="gallery/image1"/>
        </div>
        <p>Some text to the right...</p>
        <!-- more stuff -->
    </li>
    <li id="galleryItem2">
    <!-- ... -->
</ul>

Thanks for the help!

Answer 1

You could use background-position for that.

#your_div {
    background-position: center center;
    background-image: url('your_image.png');
}

Answer 2

If setting the image as a background image and centering it that way isn't an option, the jQuery to adapt the answer you linked for static images would go:

$(".fixed-div img.variable").each(function(){
  //get height and width (unitless) and divide by 2
  var hWide = ($(this).width())/2; //half the image's width
  var hTall = ($(this).height())/2; //half the image's height, etc.

  // attach negative and pixel for CSS rule
  hWide = '-' + hWide + 'px';
  hTall = '-' + hTall + 'px';

  $(this).addClass("js-fix").css({
    "margin-left" : hWide,
    "margin-top" : hTall
  });
});

assuming a CSS class defined as

.variable.js-fix {
  position:absolute;
  top:50%;
  left:50%;
}

with the fixed-width div having a height and position:relative declared.

[important js edit: switched '.style()' to '.css()']

Answer 3

Using display: table-cell trick for div

Working correctly in: Firefox, Safari, Opera, Chrome, IE8

CSS example:

div {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
img {
  display: inline;
}

HTML example:

<div>
  <span></span>
  <img src="" alt="" />
</div>

Firefox example

Answer 4

Crossbrowser solution

<style>
  .border {border: 1px solid black;} 
</style>
<div class="border" style="display: table; height: 400px; width: 400px; #position: relative; overflow: hidden;">
  <div class="border" style=" #position: absolute; #top: 50%;display: table-cell; text-align: center; vertical-align: middle;">
    <div class="border" style="width: 400px; #position: relative; #top: -50%">
      <img src="smurf.jpg" alt="" />
  </div>
</div>

Original solution for vertical div positioning