javascript - How to position two elements centered on top of each other? -

the problem: have form button underneath submit (post) data jquery ajax(). want button replaced spinner (animated png) duration of server ajax call. such trivial task impossible in css right.

what have tried: have placed button , image inside bootstrap row. ox ajax call have set button display none , img display block. because 2 not of same size makes whole page flicker, breaks positioning of other elements , on.

another idea try place both elements on top of each other absolute positioning. but, stupid css cannot center on middle of row.

is there way position both elements on top of each other can control visibility? please bear in mind cannot used absolute position in pixel, because web page , not not how wide browser be, image can change in future, text in button can change in future, things affect absolute size. if there solution problem prevent page jumping , down great.

edit link 1 of fiddle experiments: https://jsfiddle.net/ofb2qdt8/

.button {     position: relative;     margin: auto;     height: 50px;     width: 30px;     background: blue;     z-index: 1;     display: block; }  .spinner {     position: relative;     margin: auto;     height: 30px;     width: 50px;     background:red;     z-index: 2; } 

this renders second element underneath on screen. not on different z layer.

experiment 2: https://jsfiddle.net/ofb2qdt8/

.button {     position: absolute;     margin: auto;     height: 50px;     width: 30px;     background: blue;     z-index: 1;     display: block; }  .spinner {     position: absolute;     margin: auto;     height: 30px;     width: 50px;     background:red;     z-index: 2; } 

this not center both elements, , pushed top of containing div. element less height should centered.

check working demo: https://jsfiddle.net/ofb2qdt8/3/

add in few lines of jquery , update css.

position loading div according button div's position, width, height using jquery.

*click button see loading div, , try play margin of button pixel.

jquery

$(document).ready(function(){     $('.c2').each(function(){         $(this).css({             'width':$(this).siblings('.c1').outerwidth(),             'height':$(this).siblings('.c1').outerheight(),             'top':$(this).siblings('.c1').offset().top,             'left':$(this).siblings('.c1').offset().left         });     });     $('.c2').on('click', function(){         $(this).hide(0);     }); }); 

css

.c1 {     margin:100px auto;     width:100px;     text-align:center;     padding:5px 10px;     background: blue;     z-index: 1; }  .c2 {     position:fixed;     text-align:center;     background:red;     z-index: 2;     cursor:pointer; }