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

Answer 1

This is a PHP variant.

It is a lot of code but works like a charm. I came up with it after reading several posts on this subject. It positions images of various sizes in een fixed width and height div

You CSS should contain this:

.friend_photo_cropped{
    overflow: hidden;
    height: 75px;
    width: 75px;
    position:relative;
}
.friend_photo_cropped img{
    position:relative;
}

Your code should be this:

<?php
list($width, $height) = getimagesize($yourImage);
if ($width>=$height)
{
        $h = '75';
        $w = round((75/$height)*$width);
}
else
{
        $w = '75';
        $h = round((75/$width)*$height);
}
$top = -round(($h-75)/2);
$left = -round(($w-75)/2);
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
        echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">';
echo '</div>';
echo '</td>';
?>

Answer 2

With CSS3 flexbox, you will not need any more hacks to center the image. It is currently supported by all modern browsers. Check out Can I use flexbox?

.container {
  display: flex; /* Flexible layout container */
  justify-content: center; /* Horizontal center alignment */
  align-items: center; /* Vertical center alignment */
  background: lightblue;
  /* Fixed size container */
  height: 300px;
  width: 300px;
}

<div class="container">
  <img src="http://placehold.it/150x150">
</div>

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

Check out my solution: http://codepen.io/petethepig/pen/dvFsA

It's written in pure CSS, without any JS code. It can handle images of any size and any orientation.

add another div to your HTML code:

<div class="imageContainer">
    <img src="gallery/image1"/>
</div>

CSS code:

.imageContainer {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.imageContainer:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Update: I got rid of this <div class="trick"></div> element in favor of :before CSS selector

Answer 5

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

Answer 6

You can also align this way. At least thats how i did it and it worked for me. May not be the best way of doing it. I had a bunch of different size logos inside fixed size divs.

First get the dimensions of the image. Then based on the height of your div you can figure out what the top margin should be. This will vertically center it. Just change $IMG_URL and $DIVHEIGHT values.

list($width, $height, $type, $attr) = getimagesize($IMG_URL);
$margin-top = number_format(($DIVHEIGHT - $height) / 2, 0);

For example.

<div style="margin-top:".$margin-top."px\"><img src="" /> </div>