如果在Chrome中不准确，如何确定水平居中元素的确切位置？

Question

图片和小提琴的价值超过千言万语：

http://jsfiddle.net/xrer55r7/

慢慢调整窗口大小，看到条纹背景偶尔不对齐。我正在控制台中记录位置，它根本不会改变。但在视觉上确实如此。

Chrome将水平居中的元素（text-align: center;）与另一个水平居中的元素（margin: 0 auto;）对齐，使其围绕视在位置，从而产生视觉上的变化。它没有反映在我使用jQuery的.position()。

获得元素的位置

基本上这个问题在Firefox / Safari中不存在，在某种程度上是在IE上（在我的应用程序中它不会引起问题），但它在Chrome上非常突出。

我需要一种方法来获取或计算此位置或禁用此行为，或者在保持所有内容居中的同时使背景变为不对齐。

<div class="box">
    <div class="centered good">
        This is just fine! :)
    </div>
    <br/>
    <div class="centered bad">
        This is not :(
    </div>
</div>

<script type="text/javascript">
    .box {
        width: 313px;
        height: 206px;
        background: url('data:image/gif;base64,R0lGODlhAgABAIAAACmd/////ywAAAAAAgABAAACAkQKADs=');
        position:relative;
        margin: 0 auto;
        text-align: center;
    }
    .centered{
        display: inline-block;
        color: black;
        padding: 5px;
        background: url('data:image/gif;base64,R0lGODlhAgABAIAAACmd/////ywAAAAAAgABAAACAkQKADs=');
        font-size:15px;
    }
</style>