logo标签列表

将图像在 div 中居中对齐

htmlcss
372
我有以下的div元素。
<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

如何将图像对齐以位于div的中间和中心位置？

14
重复问题，2分钟前已经问过了：CSS：图片居中 - Pekka
1
类似的主题可以在这里找到：https://dev59.com/NGMl5IYBdhLWcg3wTlcl#18516474 - Hashem Qolami
请考虑选择一个答案作为正确答案。 - McSonk
可能是如何将图像在垂直和水平方向上居中对齐的重复问题。 - gbjbaanb
37个回答
2

HTML：

<div id="over">
    <img src="img.png">
</div>

CSS：

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}
最好加一些评论，而不仅仅是把代码扔出来。 - Parkash Kumar
2

要实现水平居中，只需添加以下CSS样式：

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

另一种方法：

#over img {
    display: inline-block;
    text-align: center;
}

要使内容垂直居中，只需添加以下代码：

   #over img {

           vertical-align: middle;
        }
2

这对我起了作用。

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

注意：在这种情况下，不要为“BrandImage”关联CSS类

CSS：

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}
2
这对我有用：
#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}
2
    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>
2

很多答案建议使用margin:0 auto，但这仅适用于您要居中的元素没有向左或向右浮动，也就是说没有设置float css属性。为了实现这一点，将display属性应用于table-cell，然后将左右边距应用于自动，因此您的样式看起来像这样：style="display:table-cell;margin:0 auto;"

1

大多数解决方案都不起作用，因为高度为100％的div并不意味着完整的浏览器高度。

使用height: 100vh;可以解决问题。

<style type="text/css">
body {
  margin: 0;
}

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
    vertical-align: middle;
}
</style>

<div id="over">
  <img src="test.png" alt="test" width="600">
</div>
1
这是一个CSS Grid的答案。
#over {
  display: grid;
  height: 100vh;
  place-content: center;
}

place-content: center 是以下的简写形式：

.element {
  align-content: center;
  justify-content: center;
}

这样可以确保图像在垂直和水平轴上都居中对齐。
<div id="over">
 <img src="img.png">
</div>

我假设您对div应用的内联样式仅用于演示目的，因此已将其省略。div的宽度将自然地成为其父容器的100%宽度，我添加了一个任意的height: 100vh规则，但请随意根据您的需要进行更改。
供参考，这是我关于如何使用CSS居中图片的指南中的内容。
1
使用定位。以下对我有用...
在图像的中心进行缩放（图像填充div）：
div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

不将图像缩放到中心（图像不填充div）：

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
0
你可以查看这个解决方案：
居中水平和垂直放置图像于盒子内 Centering horizontally and vertically an image in a box
<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接