如何将图像水平和垂直居中在div中

Question

我的页面中有以下标记代码:

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

它并没有像我预期的那样出现,它看起来像那样:

但我想得到这个结果:

如何水平和垂直居中显示此图像？

Answer 1

这是一个如何在div中垂直和水平居中图像的教程.

这是你在找什么:

.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

对于垂直对齐,我会包含一些CSS来从顶部50%定位它,然后将其向上移动图像高度的一半.

水平,我会按照建议使用保证金.

因此,如果你的图像是100x100px,你最终会得到.

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

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