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>

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

enter image description here

但我想得到这个结果：

enter image description here

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

Answer 1

以下是 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>

Answer 2

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

横向，我会按照建议使用保证金。

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

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

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

Answer 3

您需要解决两个方面。第一方面是水平对齐。这可以通过边距轻松实现：自动应用于图像本身周围的div元素。 DIV需要将宽度和高度设置为图像大小（否则这将无效）。要实现垂直中心对齐，您需要在HTML中添加一些JavaScript。这是因为在页面启动时不知道HTML高度大小，并且可能稍后更改。最好的解决方案是使用jQuery并编写以下脚本： $（window）.ready（function（）{/ *监听窗口就绪事件 - 在页面加载后触发* / repositionCenteredImage（）; }）;

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

Answer 4

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

.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

符合您的要求

Answer 5

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%;
}

Answer 6

尝试这样的事情：

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

Answer 7

使用margin-top

示例css

 #id_immagine{
  margin:0 auto;
   }

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

7 个答案: