39346


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

# 質問

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

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

===HTML(PHP)===

[code]

    <?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>
    
[/code]

===CSS===

[code]

    @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;
    }
    
[/code]

===JavaScript(JQuery)===

[code]

    $(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);
        });
    
    });
    
[/code]


CC BY-SA 3.0
2017-11-06T04:39:25.110
39329
2017-11-06T15:45:11.710
2020-06-17T08:14:45.997
-1
25696
question
javascript html jquery
画面中央（縦・横）に表示したいDIV要素が、左上に表示されてしまう原因・対策を知りたい


皆様、ご支援をありがとうございます。  
本件、yyz様のご見解から無事解決を導くことができました。

ページ上で中央に表示したかったDIV要素に、CSS側で予め

[code]

    position: fixed; 
    
[/code]

を記述すると、見事期待通りの結果を得ることができました。感謝感激です。


CC BY-SA 3.0
2017-11-06T15:45:11.710
39346
2017-11-06T15:45:11.710
25696
39329
answer