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

【问题标题】：How to center image in a div horizontally and vertically如何在 div 中水平和垂直居中图像
【发布时间】：2012-05-04 23:28:04
【问题描述】：

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

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

它并没有像我预期的那样出现，它看起来像这样：

但我想得到这个结果：

如何使这张图片水平和垂直居中？

【问题讨论】：

为什么你使用 4 个标签而不是 2 个？应该可以工作。
我在 div 的底部看到图像，X 显示了一些东西，或者我必须为其设置一些值？
X 可能对您有任何好处：“5%”、“10px, 0”...您也可以将带有“background-image”和“background-position”的底部图像放在主分区
How to vertically align an image inside div的可能重复

标签： html css image

【解决方案1】：

Image in a div horizontally and vertically.

<div class="thumbnail">                
    <img src="image_path.jpg" alt="img">
</div>

.thumbnail {
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.thumbnail img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

【讨论】：

【解决方案2】：

此解决方案适用于所有尺寸的图片 在此，图像的比例也保持不变。

.client_logo{
  height:200px;
  width:200px;
  background:#f4f4f4;
}
.display-table{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.display-cell{
    display: table-cell;
    vertical-align: middle;
}
.logo-img{
    width: auto !important;
    height: auto;
    max-width: 100%;
    max-height: 100%;

}

<div class="client_logo">
    <div class="display-table">
      <div class="display-cell">
         <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
      </div>
    </div>
</div>

你可以设置大小

.client_logo

根据您的要求

【讨论】：

【解决方案3】：

这里有一个 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>

【讨论】：

"wraptocenter" (into example) 是我的 root_img div 的类吗？
跨浏览器不兼容... :(

【解决方案4】：

您需要解决两个方面的问题。第一个方面是水平对齐。这很容易通过 margin: auto 应用到图像本身周围的 div 元素上来实现。 DIV 需要将宽度和高度设置为图像大小（否则这将不起作用）。要实现垂直居中对齐，您需要在 HTML 中添加一些 javascript。这是因为 HTML 高度大小在页面启动时是未知的，以后可能会改变。最好的解决方案是使用 jQuery 并编写以下脚本： $(window).ready( function() { /* 监听窗口就绪事件 - 在页面加载后触发 */ 重新定位居中图像（）； });

    $(window).resize(function() { /* listen to page resize event - in case window size changes*/ 
        repositionCenteredImage();
    });

    function repositionCenteredImage() { /* reposition our image to the center of the window*/
        pageHeight = $(window).height(); /*get current page height*/
        /*
        * calculate top and bottom margin based on the page height
         * and image height which is 300px in my case.
         * We use half of it on both sides.
         * Margin for the horizontal alignment is left untouched since it is working out of the box.
        */
        $("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"}); 
    }

显示图像的 HTML 页面如下所示：

    <body>
        <div id="pageContainer">
            <div id="image container">
                <img src="brumenlabLogo.png" id="logoImage"/>
            </div>
        </div>
    </body>

附加到元素的 CSS 如下所示：

#html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
}

#pageContainer { /*css for the whole page*/
    margin: auto auto;   /*center the whole page*/
    width: 300px;
    height: 300px;
}

#logoImage { /*css for the logo image*/
    width: 300px;
    height: 300px;
}

您可以从我们公司主页的以下网址下载整个解决方案：

http://brumenlab.com

【讨论】：

【解决方案5】：

使用顶部边距

示例css

 #id_immagine{
  margin:0 auto;
   }

【讨论】：

【解决方案6】：

试试这样的：

<div style="display:table-cell; vertical-align:middle">
 "your content"
</div>

【讨论】：

图片和文字对齐方式不同。

【解决方案7】：

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

水平，我会按照建议使用边距。

因此，如果您的图像是 100x100 像素，您最终会得到。

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

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

【讨论】：

是的，抱歉，我没有阅读您的标记。只需将其应用于<a>，因为它会包裹您的<img>