方向改变导致位置中心div移位（引导程序）

Question

我正在使用bootstrap并使用vh代码垂直对齐div。但是，当方向改变时，它会导致一次垂直居中的div错位，因此我尝试编写一些jquery来重新加载窗口，这将导致它再次居中。但java无法正常工作。如果有人可以向我指出，为什么不是，那就太好了。感谢。

CSS：

.vertical-align {
    height:auto;
    min-height: 100vh;

    /* Make it a flex container */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 

    /* Align the bootstrap's container vertically */
    -webkit-box-align : center;
    -webkit-align-items : center;
    -moz-box-align : center;
    -ms-flex-align : center;
    align-items : center;

    -webkit-box-pack : center;
    -moz-box-pack : center;
    -ms-flex-pack : center;
    -webkit-justify-content : center;
    justify-content : center;

    flex-direction: row;

    width:100%;
    text-align: center;

    font-size: 0;
}

使用Javascript：

    var wasPortrait = -1;
    var checkOrientation = function() {
        var isPortrait = (window.innerHeight > window.innerWidth);
        if( isPortrait === wasPortrait ) { return; // Nothing to do here }
        wasPortrait = isPortrait;
        alert("change dected");
        location.reload();
    };
window.addEventListener( 'orientationchange', checkOrientation, false );