如何让这些元素堆叠在一起？

Question

试图让这个 div 充满文本的页面中央，在淡出的图像后面。除了文本 div 居中之外，我已经解决了所有问题。我尝试做 margin-left: auto;margin-right: auto，但无济于事。我做错了什么吗？

我正在测试 Chrome 中的结果，如果有影响的话。

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

看到这个fiddle

由于您使用的是绝对定位，请使用

left:0;
right:0;

使项目集中。

因此 .info 的新 CSS 就像

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

如何让这些元素堆叠在一起？

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

html

css

center

alignment

看到这个fiddle