title: Center X and Y a login screen with bootstrap 4
body: <p>I started to use bootstrap 4</p>
  
  <p>my css</p>
  
  <pre><code>html{
      height:100%;
      background-color:#fff;
      font-size:12px;
  }
  body.login-body{
      height:100%;
      background-color:#fff;
      padding-top:20px;
  }
  </code></pre>
  
  <p>In my login html i created this code</p>
  
  <pre><code>&lt;body class="login-body"&gt;
     &lt;div class="container h100"&gt;
        &lt;div class="row align-items-center h-100"&gt;
           &lt;div class="col-d-4 my-auto mx-auto"&gt;
              &lt;div class="text-center"&gt;
                 &lt;img src="/img/perma-xsm.png" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="login-box"&gt;
                 &lt;div class="login-title"&gt;LCM&lt;/div&gt;
                 &lt;form class="form-signin" id="loginForm" action="/login" method="post"&gt;
                    &lt;input type="text" name="username" id="username" class="form-control" placeholder="Email" required="" autofocus=""&gt;
                    &lt;input type="password" name="password" id="password" class="form-control" placeholder="Password" required=""&gt;
                    &lt;button class="btn btn-lg btn-primary btn-block" type="submit"&gt;Login&lt;/button&gt;
                 &lt;/form&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I tried to align verticaly and horizontaly without success my login</p>
  
  <p>so my try was to use align-items-center on flexbox parent </p>