<div class="loginDiv">


    <form id="loginForm">

        <label>Username:</label>
        <input name="userName" type="text"
            ng-model="username"
            value="{{username}}"
            />
            <br />

            <label>Password:</label>
            <input name="password" type="text"
            ng-model="password"
            value="{{password}}"
             />
            <br />

        <button ng-click="login(username, password)">Login</button>


    </form>


</div>

.loginDiv {
    position: absolute;
    width: 300px;
    height: 300px;
    /* Center form on page horizontally & vertically */
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}

.loginForm {
    width: 300px;
    height: 300px;
    background: gray;
    border-radius: 10px;
    margin: 0;
    padding: 0;
}

<div class="loginDiv">
        <form id="loginForm">
            <label>Username:</label>
            <input name="userName" type="text"
                ng-model="username"
                value="{{username}}"
                />
                <br />
                <label>Password:</label>
                <input name="password" type="text"
                ng-model="password"
                value="{{password}}"
                 />
                <br />
            <button ng-click="login(username, password)">Login</button>
        </form>
    </div>

.loginDiv {
        width: 300px;
        height: 300px;
        margin: auto;
        float: none;
    }

#loginForm {
    width: 300px;
    background: gray;
    border-radius: 10px;
    margin: 0;
    padding: 0;
    top: 50%;
    position: absolute;
}

.loginDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}