Is it possible to make an absolutely positioned img centered horizontally?

Question

Is it possible, using only CSS (no JS), to make an image horizontally centered with respect to its container, in a responsive-like fashion (Obviously, if the container has a fixed width I could do math with pixels to get it exact) ??

Here's a fiddle of the scenario: http://jsfiddle.net/uqxu0vtv/1/

div.somediv { padding: 150px 2% 2%; border: 1px solid #000; position: relative;}
    div.somediv img { position: absolute; top: 20px; left: 35%;}

score 1 · Accepted Answer · answered Mar 19 '15 at 16:56

Yes, absolutely! :)

div.somediv {
  padding: 150px 2% 2%;
  border: 1px solid #000;
  position: relative;
}
div.somediv img {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

<div class="somediv">
  <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
  <p>If the Federal Reserve prints more money, then the market will go up in nominal terms, creating the illusion that the stock market is going up, but it's not; our money is going down.</p>
</div>

Is it possible to make an absolutely positioned img centered horizontally?

1 Answers1