Center an image horizontally and position it on the bottom vertically within a div when width is unknown

Question

I have a figure with a percentage-based with. Within that box, I have an image with a transparent background. I need to center it horizontally, and pin it to the bottom of the container, while allowing the top to break out of the container (see image).

I can use absolute positioning to pin it to the bottom and break out of the top, but I can't get it centered. Is there a way to do it when I won't know the width of the image and the width of the container is flexible? Is display:table a possibility?

My Code:

<figure class="feature">
<a href="#">
    <img src="image" /> 
    <p class="title-bar">Caption</p>
</a>
</figure>

.figure { position: relative; width: 50%; }
.figure img { position: absolute; bottom: 0; }

Answer 1

Please, check this fiddle, there is 2 variants to center an image

http://jsfiddle.net/GSKFD/

Markup is the same

<figure>
<a href="">
    <img src="http://placekitten.com/200/300" alt="" />
</a>
</figure>

General style for both methods

img{
        vertical-align: bottom;
    }

First variant

figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
    position: absolute;
    bottom: 0;
    left: 50%;
}
figure img{
    position: relative;
    left: -50%;
}

And the second one

figure{
    position: relative;
    width: 50%;    
    height: 300px;
    background: #cad;
}
figure a{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
}