皆様　いつも大変お世話になっております。ネット上の記事を参考にCLASS名=BOXのDIV要素を、画面中央に表示しようとていますが、JSが正常に機能していないのか左はしに表示されてしまいます。

質問

以下がコーディングですが、原因をどなたかご教示頂けませんでしょうか？

ちなみに
①画面の背景色が変わっている、DIV=boxの縦横のサイズを試しにメッセージボックスへ表示してみると、無事表示することができました。（=外部ファイル記述のCSSは参照に成功している）
②画面を開くと一番上に位置するテキストボックスへフォーカスがあたっている、上記のとおり試しにメッセージボックスで縦横のboxのサイズを表示しようとすると無事メッセージボックスが現れてきた。（=外部ファイル記述のJSは参照に成功している）

===HTML(PHP)===

<?php include "php_classes/classes.php";

    session_start();
    if (isset($_POST["loginid"])) {

        // 省略

    }

?>

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ログイン</title>
        <link rel="stylesheet" type="text/css" href="css/logon_style.css">
        <!-- Jquery -->
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/logon.js"></script>
    </head>
    <body>
        <div class="box">
            <form action="" method="post">
                <input type="text" name="loginid"><br>
                <input type="password" name="password"><br>
                <input type="submit" name="login" value="ログイン">
            </form>
        </div>
    </body>
</html>

===CSS===

@charset "UTF-8";

/* タイプセレクタ */
body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-color: #f5f3eb;
    font-family: meiryo ,sans-serif;
}



.box {
    width: 300px;
    height: 200px;
}

===JavaScript(JQuery)===

$(function(){

    //画面最初のテキストボックスへフォーカスあてる
    $("input[type=text]").eq(0).focus();


    //*** ｂｏｘというクラス名のｄｉｖ要素が真ん中に表示されない！***
    checkWidth = function(){
        var browserWidth = $(window).width();
        var boxW = $(".box").width();
        var plusPxW = ((browserWidth - boxW)/2);
        $('.box').css({'left': plusPxW + "px"});
    };

    checkHeight = function(){
        var browserHeight = $(window).height();
        var boxH = $(".box").height();
        var plusPxH = ((browserHeight - boxH)/2);
        $('.box').css({'top': plusPxH + "px"});
    };


    $(function(){
        checkWidth();
        $(window).resize(checkWidth);
    });

    $(function(){
        checkHeight();
        $(window).resize(checkHeight);
    });

});