How to center image in a div horizontally and vertically

Question

I have the following markup code in my page:

<div id="root_img" style="width:100%;height:100%">
    <div id="id_immagine" align="center" style="width: 100%; height: 100%;">
        <a id="a_img_id" href="./css/imgs/mancante.jpg">
            <img id="img_id" src="./css/imgs/mancante.jpg" />
        </a>
    </div>
</div>

And it does not appear as I expected, it looks like that:

But I wanted to get this result:

How can I center this image horizontally and vertically?

Answer 1

Here is a tutorial for how to center the images vertically and horizontally in a div.

Here is what you are looking for:

.wraptocenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  background-color: #999;
}
.wraptocenter * {
  vertical-align: middle;
}

<div class="wraptocenter">
  <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>

Answer 2

For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.

Horizontal, I would use a margin, as suggested.

So if your image was 100x100px you'd end up with.

<img id="my_image" src="example.jpg">

<style>
#my_image{
 position: absolute;
 top: 50%;
 margin: -50px auto 0;
}
</style>