How to vertically align a form in Bootstrap 4

I have a form here inside of a container div and I wish to vertically align it in the page. I cannot for the life of me figure out how. I tried using tables and such and also flexboxes but I cannot get my head around it.

Here is my code

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta http-equiv="x-ua-compatible" content="ie-edge">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="login.css" type="text/css">


  </head>

   <body>

    <div class="container">
       <div class="alert alert-warning alert dismissable fade show" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
           <strong>Note:</strong> This feature is not working yet. Don't try to log in!
        </div>
        <form class="form-signin  col-6 align-self-center">
            <h1 class="text-center">Sign In!</h1>
            <p>
                <label class="sr-only">Email Address</label>
                <input type="emai" placeholder="Email Address" class="form-control" required autofocus>
            </p>
            <p>
                <label class="sr-only">Password</label>
                <input type="password" placeholder="Password" class="form-control" required autofocus>
            </p>

            <p class="checkbox"><label><input type="checkbox"> Remember me</label></p>

            <button type="submit" class="btn btn-primary btn-block ">Sign in</button>
        </form>

    </div>


    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

  </body>

</html>

And here is the CSS

    html, body {

    height: 100%;

}

.container {

    max-width: 400px;
    height: 100%;
    min-height: 100%;


}

.form-signin {

    vertical-align: middle;
}

.box {

    border: 1px red dotted;
}

Solution

Adding height: 100% to a div element does not stretch it to the entire screen. You can check this by adding some border to your div. So changing the height value in your .container class to 100vh should solve your issue.