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个回答
0
一个简单的方法是为div和图像创建单独的样式，然后分别定位它们。比如说，如果我想将我的图像位置设置为50％，那么我的代码应该像下面这样... 

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}
<div id="over">
 <img src="img.png" id="img">
</div>

请告诉我它是否适用于所有类型的浏览器，即使这是每个浏览器都必须支持的基本功能（否则就不能称之为浏览器）。 - KSJ10
0

很长一段时间以来，我也尝试着把图片放在居中的 div 中，但对于我的情况，我只需要在 ajax 加载进度中使用这种类型的组件，因此我简单地尝试了以下解决方案，希望这能对你有所帮助！

<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>
0

我在CSS中添加了一些属性。就像这样：

div#over {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-align-items: center;
    display: -webkit-flex;
    display: -ms-flex; 
    display: flex;
}
-1
使用Bootstrap的align-items和justify-content。请参见以下示例：
<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>
-1
#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

根据您的需要修改高度值。

-1

这应该可以工作。

测试重要提示：要运行代码片段，请单击左侧按钮运行代码片段，然后单击右侧链接全页

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}
<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://istack.dev59.com/qHF2K.webp" />
</div>

-1
我看到了超过30个答案，但是我还没有看到这个答案，所以我要补充一下。 只需要添加一个center标签即可。
<div id="over" style="position:absolute; width:100%; height:100%>
 <center>
    <img src="img.png">
 </center>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接