jQuery resize taking 3 attempts before ending up where it's needed

Question

Reproducible here jsfiddler code

I have the following

    $(window).resize(function () {

        $('.buttonWrapper').css({
            position: 'absolute',
            left: ($(window).width() - $('.buttonWrapper').outerWidth()) / 2,
            top: ($(window).height() - $('.buttonWrapper').outerHeight()) / 2
        });

    });

    // To initially run the function:
    $(document).ready($(window).resize);

html

<div class="background">
    <div class="buttonWrapper">
        <div class="inlineWrapper">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <img src="~/Content/Images/SquareTest.png" width="200" height="200" />
                    </div>
                    <div class="back">
                        <img src="~/Content/Images/SquareTest.png" width="200" height="200" />
                    </div>
                </div>
            </div>
        </div>
        <div class="inlineWrapper">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <img src="~/Content/Images/SquareTest.png" width="200" height="200" />
                    </div>
                    <div class="back">
                        <img src="~/Content/Images/SquareTest.png" width="200" height="200" />
                    </div>
                </div>
            </div>
        </div>
        <div class="inlineWrapper">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <img src="~/Content/Images/SquareTest.png" width="200" height="200" />
                    </div>
                    <div class="back">
                        <img src="~/Content/Images/SquareTest.png" width="200" height="200" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: rgb(150, 150, 150) url(/Content/Images/LargeLogo.png) no-repeat center center fixed;
    -webkit-background-size: 80%; /* For WebKit*/
    -moz-background-size: 80%;    /* Mozilla*/
    -o-background-size: 80%;      /* Opera*/
    background-size: 80%;         /* Generic*/
    z-index: -1;
}

.buttonWrapper {
    z-index: 1;
}

 @font-face {
  font-family: "HemiHead";
  src: url("../../fonts/hemi_head_bd_it.otf");
  src: local("hemi_head_bd_it"),
    url("../../fonts/hemi_head_bd_it.otf") format("opentype"),
  }

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 200px;
    height: 200px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

.flipper img {
    max-height: 200px;
    max-width: 200px;
    vertical-align: middle;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

.inlineWrapper {
    float: left;
    padding: 5px;
}

The items contained in the class start out in the upper left.

After the 1st resize they end up center left.

After the 2nd resize they finally end up center center which is where I want them to live.

How do I get this to initially start out center center without having to resize the window by hand for it to finally end up center.

Answer 1

trigger resize on page load

for that change
$(document).ready($(window).resize);
to

$(document).ready(function(){
    $(window).resize();
});

by default button Wrapper width is set to window width add float:left to the buttonwrapper class to get actual container width
updated fiddle http://jsfiddle.net/zyaev79m/4/

Answer 2

Try applying these in a $(document).ready();

http://learn.jquery.com/using-jquery-core/document-ready/