How do I keep these elements stacked on top of each other?

Question

Trying to keep this div full of text in the center of the page, behind an image that fades out. I have everything worked out except for the centering of the text div. I tried doing margin-left: auto;margin-right: auto, but to no avail. Am I doing something wrong?

And I'm testing the results in Chrome as I go, if that makes a difference.

HTML

    <div class="content">
        <div class="info">
            <p class="title">is this like, something i don't know</p>
            <p> </p>
            <p class="size">90 x 145 cm</p>
            <p> </p>
            <p class="year">2012</p>
        </div>
        <img class="work" src="029.jpg"/>
    </div>

CSS

.work {
display: block;
margin-left: auto;
margin-right: auto;
}

img.work:hover {
    opacity:0.5;
}

.content {
    position: relative;
}

.info {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    position: absolute;
    z-index: -1;
}

.title {
    font-size: 20px;
    font-weight: bold;
}

.year {
    font-size: 15px;
    font-weight: bold;
}

.size {
    font-size: 15px;
    font-weight: bold;
}

Answer 1

See this fiddle

Since you are using absolute positioning, use

left:0;
right:0;

to make items centralized.

Thus your new CSS for .info would be like

.info {
    text-align: center;
    margin-top: 100px;
    position: absolute;
    z-index: -1;
    right:0;
    left:0;
}