html - 图像重叠图像，中间位置

Question

这是我的 CSS 类:

.overitem {
    position: relative; 
    background: url(images/bg.png) no-repeat; 
    width:83px;
    height: 83px;
}

.sit {
    position: absolute; 
    top: 50%; 
    left: 50%;
}

我的 HTML:

<div class="overitem"><img src="/images/vcs.png" class="sit"/></div>

问题是我不能从 img 标签，在 overitem 类的背景中间。我应该怎么做才能让它出现在 bg.png 图片的中间？

Answer 1

由于 .sit 类必须有固定的宽度和高度(因为它是一个图像)，您可以使用以下方法:

    .sit {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 500px;
       height: 500px;
       margin-top: -250px; /* Half the height */
       margin-left: -250px; /* Half the width */
    }

来源:http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/