javascript - 在可调整大小的窗口中使用 Z 索引居中图像？

Question

我的图像完美居中，直到我决定将图像放在另一个图像后面并使用 z-index。我使用的是相对定位，但在移动到绝对定位后，它会向左对齐。

即使调整了窗口大小，我如何才能将其居中？

这是我在 jsfiddle 中的代码：http: //jsfiddle.net/WJPhz/

HTML

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript">  </script> 
<center>
    <div id="sign" style="z-index:1">
        <img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"">
    </div>
    <div id="numbers" style="z-index:0">
        <img src="http://s9.postimg.org/z3j212sov/image.png" alt"">
    </div>
</center>

CSS

#sign {
    cursor: pointer;
    max-width: 241px;
    position:absolute;
}

#numbers {
    cursor: pointer;
    max-width: 241px;
    position:absolute;
}

Javascript

$(document).ready(function() {
     $('#sign').hide().delay(1000).fadeIn(3000);
     $('#numbers').hide().delay(2000).fadeIn(3000);

     $("#sign").click(function() {
            $('#sign').fadeOut(3000);
    });
});

Answer 1

一种解决方法是将您的图像放在另一个 div 中并以该 div 为中心：

html

<div class="center">
    <div id="sign">
        <img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"" />
    </div>
    <div id="numbers">
        <img src="http://s9.postimg.org/z3j212sov/image.png" alt"" />
    </div>
</div>

css

.center {
    position:relative; 
    max-width: 241px;
    margin:0 auto;
}

#sign {
    cursor: pointer;
    max-width: 241px;
    position:absolute;
    top:0; 
    left:0;
    z-index:2;
}

#numbers {
    cursor: pointer;
    max-width: 241px;
    position:absolute;
    top:0; 
    left:0;
    z-index:1;
}

http://jsfiddle.net/peteng/WJPhz/2/

Answer 2

试试这个，也许这可以帮助http://jsfiddle.net/markipe/WJPhz/1/

CSS

left:50%;
margin-left: -120px; /*div width divide by 2*/

Answer 3

#sign {
    cursor: pointer;
    max-width: 241px;
    position:absolute;
    margin-left:calc(50% - 120px);
}

#numbers {
    cursor: pointer;
    max-width: 241px;
    position:absolute;
    margin-left:calc(50% - 120px);
}

这应该有效。