<p>How can I center an image horizontally and aligned to the bottom of the container at the same time? </p>

<p>I have been able to center the image horizontally by its self. I have also been able to align the bottom of the container by its self. But I have not been able to do both at the same time. </p>

<p>Here is what I have:</p>

<pre><code>.image_block {
    width: 175px;
    height: 175px;
    position: relative;
    margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}

&lt;div class="image_block"&gt;
    &lt;a href="..."&gt;&lt;img src="..." border="0"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>That code aligns the image to the bottom of the div. What do I need to add/change to make it also center the image horizontally inside the div? The image size is not known before hand but it will be 175x175 or less.</p>

Remove the
```
position: relative;
```
line. I'm not sure why exactly but it fixes it for me.