css - 未知高度的绝对定位图像的纯 CSS 居中

Question

我有以下代码:

<div id=wrapper>
  <img id=my_img src="img.png" />
</div>

<style>
  #my_img{
    max-width: 75%;
    max-height: 80%;
    position: absolute;
    bottom: 60px;
  }
</style>

我需要将#my_img 置于#wrapper 的中心，绝对定位在距离#wrapper 底部 60px 的位置。问题是 #my_img 的宽度并不总是已知的——当 max-height 对非常宽的视口(viewport)生效时。

• 显示: block ；和 margin :0 自动；不适用于绝对定位的元素。

• 显示:内联 block ；和 text-align: center on wrapper 在 FF 和 Chrome 中将图像的左边缘对齐到中心。

• 左:50%；左边距:-width/2；不会工作，因为我不会总是知道宽度。

任何帮助将不胜感激。

Answer 1

margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

Top property

将 top/left/bottom/right 设置为 0 可能会解决您的问题。

发现于:Source