Chrome忽略了动态更改元素的相对位置

Question

I want to display a loading image in the middle of a div when I click on it. But in Chrome the image appears in the top-left. It only happens for dynamic content. The image is positioned correctly in Firefox.

http://jsfiddle.net/uGC25/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
    .inner_text {
        position: relative;
        top:45%;
    }
    .loading_img {
        position: relative;
        top:30%;
    }
    .plan_div {
        border: solid 1px;
        cursor: pointer;
        width:420px;
        height:243px;
    }
</style>
<div class='plan_div'>
    <img class="loading_img" src="http://cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/Atom%20Loading.gif" />
</div>
<div class='plan_div'>
    <div class='inner_text'>Click to generate graph.</div>
</div>
<script>
    function start_loading() {
        $(this).html('<img class="loading_img" src="http://cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/Atom%20Loading.gif">');
    }
    $(document).on('click', '.plan_div', start_loading);
</script>

Answer 1

If position is absolute

Use top, left, right and bottom

When position is relative

Use margin-top, margin-left, margin-right and margin-bottom

.inner_text { position: relative; margin-top:25%; }
.loading_img { position: relative; margin-top:20%;  }

DEMO (Working Fine Both Browsers)