Programming web Dasar Membuat Box / Login form auto tengah browser

Tutorial kali ini tentang Programming web dasar bagaimana cara membuat sebuah form (disini dicontohkan form login) agar posisi nya tetap berada di tengah browser walau sudah di resize.

Bahasa Program : HTML + CSS

Editor               : Visual Studio Code

Prinsip Kerja nya 

1. pertama membuat box untuk otomatis di tengah secara horizontal 

2. kedua membuat box untuk otomatis di tengah secara vertical

HTML :

<div class="kotakbesar">

        <div class="box_tengah">

            <div class="box_login">

                <fieldset class="login_fs">

                    <legend>Login</legend>

                    <table>

                        <tr>

                            <td>Username</td><td><input type='text' name="uname"></td>

                        </tr>

                        <tr>

                            <td>Password</td><td><input type='password' name="pwd"></td>

                        </tr>

                        <tr>

                            <td></td><td><input type='Submit' name="Login"></td>

                        </tr>

                    </table>

                </fieldset>

            </div>

        </div>

    </div>

CSS :

        body{

            padding:0;

            margin:0;

        }

        .kotakbesar{

            display: block;

            width: 100%;

            height: 100vh;

        }

        .box_tengah{

            height:100%;

            width:200px;

            border:solid 0px red;

            margin:0 auto;

            display: table;

        }

        .box_login{

            height:200px;

            border:solid 0px blue;

            text-align: center;

            display: table-cell;

            vertical-align: middle;

        }

        .login_fs{

            border-radius: 4px;

            border:solid 1px #ccc;

            background-color: cornflowerblue;

            box-shadow: 4px 4px 7px #ccc;

        }

        .login_fs legend{

            padding:2px 10px 2px;

            border:solid 1px #ccc;

            border-radius: 8px;

            background-color: cornflowerblue;

            color: #fff;

            font-weight: bold;

        }

.

Jadi : 

• Kotak besar adalah area browser secara penuh.
• box_tengah adalah kotak untuk otomatis tengah secara horizontal di setting dengan margin:0 auto; dan harus di set display: table;
• box_login adalah kotak untuk otomatis tengah secara vertical, disetting vertical-align: middle;  bagian ini harus di set display: table-cell;.
• jadi nanti setiap elemen di dalam area box_login akan berada di tengah browser.

Untuk latihan bisa lihat video yang saya buat :

.