Pure CSS centering of absolutely positioned image of unknown height

Question

I have the following code:

<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>

I need to center #my_img within the #wrapper, absolutely positioned 60px from the bottom of #wrapper. The catch is that the width of #my_img is not always known -- when max-height takes effect for a very wide viewport.

• display: block; and margin: 0 auto; will not work for an absolutely positioned element.

• display: inline-block; and text-align: center on the wrapper aligns the left edge of the image at center in both FF and Chrome.

• left: 50%; margin-left: -width/2; won't work because I won't always know the width.

Any help will be most appreciated.

Answer 1

You can use

left : 50%; transform : translateX(-50%);

Answer 2

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

Top property

Setting top/left/bottom/right to 0 would solve your problem possibly.

Found on: Source