css - 如何使凸版效果居中？

考虑这个 fiddle :http://jsfiddle.net/qkAJD/
HTML

<div style="width:500px;">
     <h1 class="success-header" title="Success!">Success!</h1>
</div>

CSS

body {
    background: gray;
    margin:0;
}
.success-header {
    color: green;
    display: inline-block;
    font-size: 50px;
    height: 50px;
    margin: 0;
}
.success-header:before {
    content: attr(title);
    position:absolute;
    color:rgba(255, 255, 255, 0.3);
    top:1px;
    left:1px;
}

结果

问题
我们如何将 <h1> 标签居中放置在其容器中，同时仍保持凸版效果？假设我们事先不知道容器的宽度是 500px。也就是说，对 header 位置进行硬编码的解决方案是 Not Acceptable 。将标题居中很容易:

<div style="width:500px;text-align:center">
     <h1 class="success-header" title="Success!">Success!</h1>
</div>

但这破坏了凸版效果:

最佳答案

“影子”相对于其最近的符合条件的父项绝对定位。您可以通过向其添加 position:relative 来使直接父级符合条件。

示例:http://jsfiddle.net/qkAJD/5/

.success-header {
    color: green;
    display: inline-block;
    font-size: 50px;
    height: 50px;
    margin: 0;
    position: relative; /* changed line */
}

Source ，强调我的。

关于css - 如何使凸版效果居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18475482/