html - 如何在div中水平和垂直居中放置图像

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

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

而且它没有像我预期的那样出现，看起来像这样:

但我想得到以下结果:

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

最佳答案

这是 tutorial ，用于说明如何在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>

关于html - 如何在div中水平和垂直居中放置图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10296015/