div中的绝对img中心位置答案

【问题标题】：absolute img center position in divdiv中的绝对img中心位置
【发布时间】：2013-07-15 21:44:37
【问题描述】：

如果我不知道图像的宽度，如何将 img 与 div 或表格单元格中的绝对定位居中对齐？

例如

<div style="position: relative">
    <img style="position: absolute" />
</div>

【问题讨论】：

对齐什么？在哪里？
编辑我的问题：居中，我不知道宽度
你能应用它作为父元素的背景图片吗？

标签： html css

【解决方案1】：

使图像垂直居中的简单方法

如果你知道 div 的高度。然后你可以将图像作为垂直对齐。

div{
    text-align:center;
    height:150px;
    line-height: 150px;
}

img{
   vertical-align: middle;
}

【讨论】：

【解决方案2】：

假设您知道图像的尺寸，您可以使用负边距技巧：

img{
   top:50%;
   left:50%;
   margin-left  : -(<imagewidth>/2)px;
   margin-height: -(<imageheight>/2)px;
}

当您只针对支持calc() 功能的浏览器时，您可以这样做：

img{
   top:  calc(50% - <imagewidth>/2px);
   left: calc(50% - <imageheight>/2px);
}

当浏览器支持翻译时，您可以翻译 -50% 的图像尺寸：

img{
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

如果这些都不可能，你最后的办法是改变标记和display:table：

<div>
  <div>
    <img />
  </div>
</div>

div{height:100%;width:100%;
   display:table;
   text-align: center;
   vertical-align: middle;}
div>div{
    display:table-cell;
}

see Demo for latest case

【讨论】：

@user2560165 从另一个答案中看到您需要支持 IE8，也许看看我的 midified 答案。

【解决方案3】：

img {
display: block;
margin: 0 auto;    
}

查看JSFIDDLE1

或

div {
position: relative;
text-aligm: center;
width:2000px;
}

img {
position: absolute;
}

检查这个JSFIDDLE2

【讨论】：

更新了我的问题 - 我不知道宽度：没有宽度边距：0 auto;不工作
@user2560165 添加了display: block。

【解决方案4】：

将元素水平和垂直对齐到相对父级。

<div style="position: relative">
    <img class="centered" />
</div>

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

'top' 和 'left' 设置为 50% 将使元素的左上角居中。 X 和 Y 的平移为 -50%，将元素设置为父元素的确切中心。

浏览器支持请看这里： Translate2d - caniuse.com

【讨论】：

@MyHeadHurts 它在你的小提琴的父元素中居中。您的父元素高度为 0px。这就是为什么它从顶部放置 -50%。
@KilianStinson 啊，对不起，我现在看到了。你水平居中和！抱歉，我不应该阅读 SO 并尝试同时工作 ;) 很好的解决方案！