[html] How to make an image center (vertically & horizontally) inside a bigger div

I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div.

How can it be done?

I am able to get it centered horizontally by using text-align: center for the div. But vertical alignment is the issue..

https://www.w3.org/Style/Examples/007/center.en.html

IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto 
}

<IMG class="displayed" src="..." alt="...">

Typically, I'll set the line-height to be 200px. Usually does the trick.

here's another method to center everything within anything.

Working Fiddle

HTML: (simple as ever)

<div class="Container">
    <div class="Content"> /*this can be an img, span, or everything else*/
        I'm the Content
    </div>
</div>

CSS:

.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

Benefits

The Container and Content height are unknown.

Centering without specific negative margin, without setting the line-height (so it works well with multiple line of text) and without a script, also Works great with CSS transitions.

Vertical-align is one of the most misused css styles. It doesn't work how you might expect on elements that are not td's or css "display: table-cell".

This is a very good post on the matter. http://phrogz.net/CSS/vertical-align/index.html

The most common methods to acheive what you're looking for are:

• padding top/bottom
• position absolute
• line-height

I've been trying to get an image to be centered vertically and horizontally within a circle shape using hmtl and css.

After combining several points from this thread, here's what I came up with: jsFiddle

Here's another example of this within a three column layout: jsFiddle

CSS:

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

HTML:

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>

This works correctly:

display: block;
margin-left: auto;
margin-right: auto 

else try this if the above only gives you horizontal centering:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

The best way to center an image both vertically and horizontally, is to use two containers, and apply the following properties :

The outher container

• should have display: table;

The inner container

• should have display: table-cell;
• should have vertical-align: middle;
• should have text-align: center;

A demo

.outer-container {_x000D_
    display: table;_x000D_
    width: 80%; /* can be any width */_x000D_
    height: 120px; /* can be any height */_x000D_
    background: #ccc;_x000D_
}_x000D_
_x000D_
.inner-container {_x000D_
    display: table-cell;_x000D_
    vertical-align: middle;_x000D_
    text-align: center;_x000D_
}_x000D_
_x000D_
.inner-container img {_x000D_
    background: #fff;_x000D_
    padding : 10px;_x000D_
    border : 1px solid #000;_x000D_
}

<div class="outer-container">_x000D_
   <div class="inner-container">_x000D_
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />_x000D_
   </div>_x000D_
</div>

Working in old browsers (IE >= 8)

Absolute position in combination with automatic margin permits to center an element horizontally and vertically. The element position could be based on a parent element position using relative positioning. View Result

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

You can set position of image is align center horizontal by this

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}

Simply set image margin auto as shown below.

img{
 margin:auto;
 width:50%;
 height:auto;
}

Check these example

here's another method to center everything within anything.

Working Fiddle

HTML: (simple as ever)

<div class="Container">
    <div class="Content"> /*this can be an img, span, or everything else*/
        I'm the Content
    </div>
</div>

CSS:

.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

Benefits

The Container and Content height are unknown.

Centering without specific negative margin, without setting the line-height (so it works well with multiple line of text) and without a script, also Works great with CSS transitions.

Vertical-align is one of the most misused css styles. It doesn't work how you might expect on elements that are not td's or css "display: table-cell".

This is a very good post on the matter. http://phrogz.net/CSS/vertical-align/index.html

The most common methods to acheive what you're looking for are:

• padding top/bottom
• position absolute
• line-height

You can center an image horizontally and vertically with the code below (works in IE/FF). It will put the top edge of the image at exactly 50% of the browser height, and the margin-top(pulling half the height of the image up) will center it perfectly.

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>

Typically, I'll set the line-height to be 200px. Usually does the trick.

easy

img {
    transform: translate(50%,50%);
}

I've found that Valamas' and Lepu's answers above are the most straightforward answers that deal with images of unknown size, or of known size that you'd rather not hard-code into your CSS. I just have a few small tweaks: remove irrelevant styles, size it to 200px to match the question, and add max-height/max-width to handle images that may be too large.

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

In CSS do it as:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}

If you know the size of the parent div and the image, you can just use absolute positioning.

This is coming a bit late, but here's a solution I use to vertical align elements within a parent div.

This is useful for when you know the size of the container div, but not that of the contained image. (this is frequently the case when working with lightboxes or image carousels).

Here's the styling you should try:

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

This works for me :

<body>
  <table id="table-foo">
    <tr><td>
        <img src="foo.png" /> 
    </td></tr>
  </table>
</body>
<style type="text/css">
  html, body {
    height: 100%;
  }
  #table-foo {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-foo img {
    display: block;
    margin: 0 auto;
  }
</style>

If you know the size of the parent div and the image, you can just use absolute positioning.

Use Flexbox:

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}

If you know the size of the parent div and the image, you can just use absolute positioning.

This worked for me. Add this to image css:

img
{
   display: block;
   margin: auto;
}

another way is to create a table with valign, of course. This would work regardless of you knowing the div's height or not.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

but you should always stick to just css whenever possible.

@sleepy You can easily do this using the following attributes:

#content {_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  width: 200px;_x000D_
  height: 200px;_x000D_
  border: 1px solid red;_x000D_
}_x000D_
_x000D_
#myImage {_x000D_
  display: block;_x000D_
  width: 50px;_x000D_
  height: 50px;  _x000D_
  margin: auto;_x000D_
  border: 1px solid yellow;_x000D_
}

<div id="content">_x000D_
  <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">_x000D_
</div>

References: W3

in the div

style="text-align:center; line-height:200px"

If you know the size of the parent div and the image, you can just use absolute positioning.

I love jumping on old bandwagons!

Here's a 2015 update to this answer. I started using CSS3 transform to do my dirty work for positioning. This allows you to not have to make any extra HTML, you don't have to do math (finding half-widths of things) you can use it on any element!

Here's an example (with fiddle at the end). Your HTML:

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

With accompanying CSS:

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

What I do a lot these days is I will give a class to things I want centered and just re-use that class every time. For example:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

css

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

This way, I will always be able to center something in it's container. You just have to make sure that the thing you want centered is in a container that has a position defined.

Here's a fiddle

BTW: This works for centering BIGGER divs inside SMALLER divs as well.

another way is to create a table with valign, of course. This would work regardless of you knowing the div's height or not.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

but you should always stick to just css whenever possible.

I had this issue in HTML5 using CSS3 and my image was centered as such within the DIV... oh yes, I can't forget how I had to add the height to show the image... for a while I wondered where it was until I did this. I don't think the position and display are necessary.

background-image: url('../Images/01.png');    
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;

Typically, I'll set the line-height to be 200px. Usually does the trick.

You can set position of image is align center horizontal by this

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}

This works correctly:

display: block;
margin-left: auto;
margin-right: auto 

else try this if the above only gives you horizontal centering:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

I love jumping on old bandwagons!

Here's a 2015 update to this answer. I started using CSS3 transform to do my dirty work for positioning. This allows you to not have to make any extra HTML, you don't have to do math (finding half-widths of things) you can use it on any element!

Here's an example (with fiddle at the end). Your HTML:

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

With accompanying CSS:

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

What I do a lot these days is I will give a class to things I want centered and just re-use that class every time. For example:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

css

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

This way, I will always be able to center something in it's container. You just have to make sure that the thing you want centered is in a container that has a position defined.

Here's a fiddle

BTW: This works for centering BIGGER divs inside SMALLER divs as well.

Another way (not mentioned here yet) is with Flexbox.

Just set the following rules on the container div:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

FIDDLE

div {_x000D_
  width: 200px;_x000D_
  height: 200px;_x000D_
  border: 1px solid green;_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
  /* align horizontal */_x000D_
  align-items: center;_x000D_
  /* align vertical */_x000D_
}

<div>_x000D_
  <img src="http://lorempixel.com/50/50/food" alt="" />_x000D_
</div>

A good place to start with Flexbox to see some of it's features and get syntax for maximum browser support is flexyboxes

Also, browser support nowadays is quite good: caniuse

For cross-browser compatibility for display: flex and align-items, you can use the following:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

You can center an image horizontally and vertically with the code below (works in IE/FF). It will put the top edge of the image at exactly 50% of the browser height, and the margin-top(pulling half the height of the image up) will center it perfectly.

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>

A simple and elegant solution that works for me everytime:

<div>
    <p style="text-align:center"><img>Image here</img></p>
</div>

thanks to everyone else for the clues.

I used this method

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}

easy

img {
    transform: translate(50%,50%);
}

I have a gallery of images for which I don't know the exact heights or widths of images beforhand, I just know that they are smaller than the div in which they are going to be contained.

By doing a combination of line-height settings on the container and using vertical-align:middle on the image element, I finally got it to work on FF 3.5, Safari 4.0 and IE7.0 using the following HTML markup and the following CSS.

The HTML Markup

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

The CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

I've been trying to get an image to be centered vertically and horizontally within a circle shape using hmtl and css.

After combining several points from this thread, here's what I came up with: jsFiddle

Here's another example of this within a three column layout: jsFiddle

CSS:

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

HTML:

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>

Use positioning. The following worked for me:

div{
    display:block;
    overflow:hidden;
    width: 200px; 
    height: 200px;  
    position: relative;
}
div img{
    width: 50px; 
    height: 50px;   
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    position: absolute;
}

div {_x000D_
  position: absolute;_x000D_
  _x000D_
  border: 3px solid green;_x000D_
  width: 200px;_x000D_
  height: 200px;_x000D_
}_x000D_
_x000D_
img { _x000D_
  position: relative;_x000D_
  _x000D_
  border: 3px solid red;_x000D_
  width: 50px;_x000D_
  height: 50px;_x000D_
}_x000D_
_x000D_
.center {    _x000D_
  top: 50%;_x000D_
  left: 50%;_x000D_
  transform: translate(-50%, -50%);_x000D_
  -ms-transform: translate(-50%, -50%); /* IE 9 */_x000D_
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */_x000D_
}

<div class="center">_x000D_
  <img class="center" src="http://placeholders.org/250/000/fff" />_x000D_
</div>

Related: Center a image

in the div

style="text-align:center; line-height:200px"

I would set your larger div with position:relative; then for your image do this:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

This only works because you know the dimensions of both the image and the containing div. This will also let you have other items within the containing div... where solutions like using line-height will not.

EDIT: Note... your margins are negative half of the size of the image.

Use positioning. The following worked for me:

div{
    display:block;
    overflow:hidden;
    width: 200px; 
    height: 200px;  
    position: relative;
}
div img{
    width: 50px; 
    height: 50px;   
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    position: absolute;
}

This is an old solution but browser market shares have advanced enough that you may be able to get by without the IE hack part of it if you are not concerned about degrading for IE7. This works when you know the dimensions of the outer container but may or may not know the dimensions of the inner image.

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>

We can easily achieve this using flex. no need for background-image.

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
   <style>_x000D_
      #image-wrapper{_x000D_
         width:500px;_x000D_
         height:500px;_x000D_
         border:1px solid #333;_x000D_
         display:flex;_x000D_
         justify-content:center;_x000D_
         align-items:center;_x000D_
      }_x000D_
   </style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div id="image-wrapper">_x000D_
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>

in the div

style="text-align:center; line-height:200px"

I've found that Valamas' and Lepu's answers above are the most straightforward answers that deal with images of unknown size, or of known size that you'd rather not hard-code into your CSS. I just have a few small tweaks: remove irrelevant styles, size it to 200px to match the question, and add max-height/max-width to handle images that may be too large.

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

Typically, I'll set the line-height to be 200px. Usually does the trick.

Simply set image margin auto as shown below.

img{
 margin:auto;
 width:50%;
 height:auto;
}

Check these example

https://www.w3.org/Style/Examples/007/center.en.html

IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto 
}

<IMG class="displayed" src="..." alt="...">

I have a gallery of images for which I don't know the exact heights or widths of images beforhand, I just know that they are smaller than the div in which they are going to be contained.

By doing a combination of line-height settings on the container and using vertical-align:middle on the image element, I finally got it to work on FF 3.5, Safari 4.0 and IE7.0 using the following HTML markup and the following CSS.

The HTML Markup

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

The CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

thanks to everyone else for the clues.

I used this method

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}

This is an old solution but browser market shares have advanced enough that you may be able to get by without the IE hack part of it if you are not concerned about degrading for IE7. This works when you know the dimensions of the outer container but may or may not know the dimensions of the inner image.

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>

Here try this out.

.parentdiv {_x000D_
 height: 400px;_x000D_
 border: 2px solid #cccccc;_x000D_
  background: #efefef;_x000D_
 position: relative;_x000D_
}_x000D_
.childcontainer {_x000D_
 position: absolute;_x000D_
 left: 50%;_x000D_
 top: 50%;_x000D_
}_x000D_
.childdiv {_x000D_
 width: 150px;_x000D_
 height:150px;_x000D_
 background: lightgreen;_x000D_
 border-radius: 50%;_x000D_
 border: 2px solid green;_x000D_
 margin-top: -50%;_x000D_
 margin-left: -50%;_x000D_
}

<div class="parentdiv">_x000D_
  <div class="childcontainer">_x000D_
     <div class="childdiv">_x000D_
     </div>_x000D_
  </div>_x000D_
</div>

In CSS do it as:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}

Working in old browsers (IE >= 8)

Absolute position in combination with automatic margin permits to center an element horizontally and vertically. The element position could be based on a parent element position using relative positioning. View Result

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

div {_x000D_
  position: absolute;_x000D_
  _x000D_
  border: 3px solid green;_x000D_
  width: 200px;_x000D_
  height: 200px;_x000D_
}_x000D_
_x000D_
img { _x000D_
  position: relative;_x000D_
  _x000D_
  border: 3px solid red;_x000D_
  width: 50px;_x000D_
  height: 50px;_x000D_
}_x000D_
_x000D_
.center {    _x000D_
  top: 50%;_x000D_
  left: 50%;_x000D_
  transform: translate(-50%, -50%);_x000D_
  -ms-transform: translate(-50%, -50%); /* IE 9 */_x000D_
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */_x000D_
}

<div class="center">_x000D_
  <img class="center" src="http://placeholders.org/250/000/fff" />_x000D_
</div>

Related: Center a image

This is coming a bit late, but here's a solution I use to vertical align elements within a parent div.

This is useful for when you know the size of the container div, but not that of the contained image. (this is frequently the case when working with lightboxes or image carousels).

Here's the styling you should try:

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

Vertical-align is one of the most misused css styles. It doesn't work how you might expect on elements that are not td's or css "display: table-cell".

This is a very good post on the matter. http://phrogz.net/CSS/vertical-align/index.html

The most common methods to acheive what you're looking for are:

• padding top/bottom
• position absolute
• line-height

The best way to center an image both vertically and horizontally, is to use two containers, and apply the following properties :

The outher container

• should have display: table;

The inner container

• should have display: table-cell;
• should have vertical-align: middle;
• should have text-align: center;

A demo

.outer-container {_x000D_
    display: table;_x000D_
    width: 80%; /* can be any width */_x000D_
    height: 120px; /* can be any height */_x000D_
    background: #ccc;_x000D_
}_x000D_
_x000D_
.inner-container {_x000D_
    display: table-cell;_x000D_
    vertical-align: middle;_x000D_
    text-align: center;_x000D_
}_x000D_
_x000D_
.inner-container img {_x000D_
    background: #fff;_x000D_
    padding : 10px;_x000D_
    border : 1px solid #000;_x000D_
}

<div class="outer-container">_x000D_
   <div class="inner-container">_x000D_
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />_x000D_
   </div>_x000D_
</div>

I would set your larger div with position:relative; then for your image do this:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

This only works because you know the dimensions of both the image and the containing div. This will also let you have other items within the containing div... where solutions like using line-height will not.

EDIT: Note... your margins are negative half of the size of the image.

.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}

another way is to create a table with valign, of course. This would work regardless of you knowing the div's height or not.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

but you should always stick to just css whenever possible.

Another way (not mentioned here yet) is with Flexbox.

Just set the following rules on the container div:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

FIDDLE

div {_x000D_
  width: 200px;_x000D_
  height: 200px;_x000D_
  border: 1px solid green;_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
  /* align horizontal */_x000D_
  align-items: center;_x000D_
  /* align vertical */_x000D_
}

<div>_x000D_
  <img src="http://lorempixel.com/50/50/food" alt="" />_x000D_
</div>

A good place to start with Flexbox to see some of it's features and get syntax for maximum browser support is flexyboxes

Also, browser support nowadays is quite good: caniuse

For cross-browser compatibility for display: flex and align-items, you can use the following:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

We can easily achieve this using flex. no need for background-image.

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
   <style>_x000D_
      #image-wrapper{_x000D_
         width:500px;_x000D_
         height:500px;_x000D_
         border:1px solid #333;_x000D_
         display:flex;_x000D_
         justify-content:center;_x000D_
         align-items:center;_x000D_
      }_x000D_
   </style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div id="image-wrapper">_x000D_
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>

in the div

style="text-align:center; line-height:200px"

I had this issue in HTML5 using CSS3 and my image was centered as such within the DIV... oh yes, I can't forget how I had to add the height to show the image... for a while I wondered where it was until I did this. I don't think the position and display are necessary.

background-image: url('../Images/01.png');    
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;

A simple and elegant solution that works for me everytime:

<div>
    <p style="text-align:center"><img>Image here</img></p>
</div>

@sleepy You can easily do this using the following attributes:

#content {_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  width: 200px;_x000D_
  height: 200px;_x000D_
  border: 1px solid red;_x000D_
}_x000D_
_x000D_
#myImage {_x000D_
  display: block;_x000D_
  width: 50px;_x000D_
  height: 50px;  _x000D_
  margin: auto;_x000D_
  border: 1px solid yellow;_x000D_
}

<div id="content">_x000D_
  <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">_x000D_
</div>

References: W3

Use Flexbox:

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}

I would set your larger div with position:relative; then for your image do this:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

This only works because you know the dimensions of both the image and the containing div. This will also let you have other items within the containing div... where solutions like using line-height will not.

EDIT: Note... your margins are negative half of the size of the image.

another way is to create a table with valign, of course. This would work regardless of you knowing the div's height or not.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

but you should always stick to just css whenever possible.

This worked for me. Add this to image css:

img
{
   display: block;
   margin: auto;
}

.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}

This works for me :

<body>
  <table id="table-foo">
    <tr><td>
        <img src="foo.png" /> 
    </td></tr>
  </table>
</body>
<style type="text/css">
  html, body {
    height: 100%;
  }
  #table-foo {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-foo img {
    display: block;
    margin: 0 auto;
  }
</style>

Here try this out.

.parentdiv {_x000D_
 height: 400px;_x000D_
 border: 2px solid #cccccc;_x000D_
  background: #efefef;_x000D_
 position: relative;_x000D_
}_x000D_
.childcontainer {_x000D_
 position: absolute;_x000D_
 left: 50%;_x000D_
 top: 50%;_x000D_
}_x000D_
.childdiv {_x000D_
 width: 150px;_x000D_
 height:150px;_x000D_
 background: lightgreen;_x000D_
 border-radius: 50%;_x000D_
 border: 2px solid green;_x000D_
 margin-top: -50%;_x000D_
 margin-left: -50%;_x000D_
}

<div class="parentdiv">_x000D_
  <div class="childcontainer">_x000D_
     <div class="childdiv">_x000D_
     </div>_x000D_
  </div>_x000D_
</div>