Question

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

例如

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

Answer 1

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

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

Answer 2

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

<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

Answer 3

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

选中此JSFIDDLE1

或

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

img {
position: absolute;
}

选中此JSFIDDLE2

Answer 4

垂直居中图像的简单方法

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

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

img{
   vertical-align: middle;
}

div中的绝对图像中心位置

4 个答案: