html - 在 div 中将 h1 置于图像的中心

Question

如何在图像中正确居中(垂直、水平)？

<div class="category-info">
    <div class="image">
            <h1>Title</h1>
            <img src="image.jpg" />
        </div>
    </div>

CSS

.category-info {
    text-align: center;
    height: 200px;
    width: 770px;
    overflow: auto;
    margin-bottom: 20px;
}

图像的宽度为 770 像素，高度为 200 像素。我不知道接下来要做什么。我尝试了几件事，但没有成功。

Answer 1

给你:http://jsfiddle.net/QjLuP/4/

CSS:

.image{
    position: relative;
    background: green; /* IE */
}
.image h1{
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-size: 20px;
    width: 100%;
    height: 26px;
    padding: 0;
    margin: 0;
    margin-top: -13px; /* 1/2 height */
    text-align: center;
    background: red;
    background: rgba(170, 0, 0, 0.8); /* CSS3 */
}
.image img{
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:green
}