我有以下 div
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
如何对齐图片，使其位于 div 的中间和中心？
【问题讨论】：
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
【讨论】：
body {
margin: 0;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}<div id="over" style="position:absolute; width:100%; height:100%">
<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>【讨论】：
display: block; 是我的陷阱。 TnX
display: block，根据w3schools.com/cssref/pr_class_display.asp，默认是display: inline。为什么我们需要使用块？我为我工作，但不确定为什么 block 会居中 img 而 inline 不会。
基本上，将左右边距设置为自动会导致图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
【讨论】：
将 img 设置为 display:inline-block，同时将上级 div 设置为 text-align:center 也能胜任
编辑：对于那些正在玩 display:inline-block >>> 的人不要忘记，例如两个 div 像
<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>
它们之间确实没有空格（如此处所示）。
只是为了避免它们之间的这些（内联块固有的）间隙。我现在写的每两个字之间都可以看到这些差距！ :-) 所以..希望这对你们中的一些人有所帮助。
【讨论】：
许多答案建议使用margin:0 auto，但这仅适用于您尝试居中的元素未在左侧或右侧浮动时，即float css 属性未设置。为此，将display 属性应用于table-cell，然后将左右边距应用于自动，这样您的样式将看起来像style="display:table-cell;margin:0 auto;"
【讨论】：
#over {position:relative; text-align:center;
width:100%; height:100%; background:#CCC;}
#over img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
【讨论】：
<div>
<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>
</div>
【讨论】：
在我看来，您还希望该图像在容器内垂直居中。 （我没有看到任何提供的答案）
HTML
<div id="over">
<span class="Centerer"></span>
<img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>
CSS
*
{
padding: 0;
margin: 0;
}
#over
{
position:absolute;
width:100%;
height:100%;
text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
注意：此解决方案适用于在任何元素中对齐任何元素。
对于 IE7，当在块元素上应用 .Centered 类时，您将不得不使用另一个技巧来使 inline-block 工作。 （那是因为 IE6/IE7 不能很好地与块元素上的 inline-block 配合使用）
【讨论】：
:before：jsfiddle.net/xaliber/cj6zhtp0，而不是额外的span
#over { position:absolute; width:100%; height:100%; 是什么？
img.centered {
display: block;
margin: auto auto;
}
【讨论】：
试试这个最小的代码：
<div class="outer">
<img src="image.png"/>
</div>
还有 CSS：
.outer{
text-align: center;
}
.outer img{
display: inline-block;
}
【讨论】：
这也可以使用 Flexbox 布局来完成：
静态尺寸
.parent {
display: flex;
height: 300px; /* Or whatever */
background-color: #000;
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}<div class="parent">
<img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>动态尺寸
html, body {
width: 100%;
height: 100%;
display: flex;
background-color: #999;
}
* {
margin: 0;
padding: 0;
}
.parent {
margin: auto;
background-color: #000;
display: flex;
height: 80%;
width: 80%;
}
.child {
margin: auto; /* Magic! */
max-width: 100%;
max-height: 100%;
}<div class="parent">
<img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>我在article 中找到了示例，它很好地解释了如何使用布局。
【讨论】：
我对此处介绍的其他解决方案仍有一些问题。最后这对我最有效：
<div class="parent">
<img class="child" src="image.png"/>
</div>
css3:
.child {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
// I suppose you may like those too:
// max-width: 80%;
// max-height: 80%;
}
您可以阅读有关该方法的更多信息at this page。
【讨论】：
这将是一种更简单的方法
#over > img{
display: block;
margin:0 auto;
}
【讨论】：
HTML：
<div id="over">
<img src="img.png">
</div>
CSS：
#over {
text-align: center;
}
#over img {
vertical-align: middle;
}
【讨论】：
水平居中放
#over img {
display: block;
margin: 0 auto;
clear:both;
}
另一种方法：
#over img {
display: inline-block;
text-align: center;
}
垂直居中放：
#over img {
vertical-align: middle;
}
【讨论】：
使用定位。以下对我有用...
缩放到图像中心（图像填充 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;
}
【讨论】：
你可以看看这个解决方案：
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>
【讨论】：
这对我有用：
#image-id {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: auto;
margin: 0 auto;
}
【讨论】：
我尝试了很多方法，但只有这一种适用于容器 div 内的多个内联元素。这是在中间对齐 div 中的所有内容的代码。
.divContainer
{
vertical-align: middle;
text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
vertical-align: middle;
}
<div class="divContainer">
<span>Middle Text</span>
<img src="test.png"/>
</div>
【讨论】：
嗯，我们在 2016 年......为什么不使用 flexbox？ 它也是响应式的。享受。
#over{
display:flex;
align-items:center;
justify-content:center;
}<div id="over">
<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>【讨论】：
一种简单的方法是为 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>【讨论】：
这对我有用。
<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;
}
【讨论】：
#over {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
}
根据需要修改高度值。
【讨论】：
CSS 文件
.over {
display : block;
margin : 0px auto;
【讨论】：
这应该可行。
测试重要：要运行代码 sn-p，请单击左按钮 RUN code sn-p，然后单击右链接整页
#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://i.stack.imgur.com/qHF2K.png" />
</div>【讨论】：
您可以使用display:flex CSS 属性轻松做到这一点：
#over {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
【讨论】：
使用引导程序 align-items 和 justify-content。请参见下面的示例：
<div class="well" style="align-items:center;justify-content:center;">
<img src="img_source" height="50px" width="50px"/>
</div>
【讨论】：
简单。 2018. 弹性盒。检查浏览器支持 - Can I Use
最小解决方案：
div#over {
display: flex;
justify-content: center;
align-items: center;
}
要获得尽可能广泛的浏览器支持：
div#over {
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
【讨论】：
我在 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;
}
【讨论】：
标记的答案不会垂直对齐图像。现代浏览器的一个合适的解决方案是 flexbox。可以将 flex 容器配置为水平和垂直对齐其项目。
<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
<img src="img.png">
</div>
【讨论】：