Estoy usando bootstrap 4 beta 2 y no puedo centrar un formulario en la página ...

Este es el enlace con mi código
https://codepen.io/davidrodri/pen/jawpeJ

<div class="container">
  <div class="row justify-content-center h-100 align-middle">
    <div class="align-self-center">
        <form>
          <h2 class="text-center">Benvenuto</h2>
            <div class="form-group">
                <label for="username">Utente</label>
                <input type="text"  class="form-control"  id="username" >
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control"  id="password" >
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
        </form>
    </div>
  </div>
</div>
0
Rodriguez David 14 nov. 2017 a las 10:16

2 respuestas

La mejor respuesta

Primero debe establecer su html y la altura del cuerpo al 100%

html, 
body {
    height: 100%;
}

Luego configure la altura del contenedor al 100%

<div class="container h-100">
  <div class="row justify-content-center h-100 align-middle">
    <div class="align-self-center">
        <form>
          <h2 class="text-center">Benvenuto</h2>
            <div class="form-group">
                <label for="username">Utente</label>
                <input type="text"  class="form-control"  id="username" >
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control"  id="password" >
           </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
        </form>
    </div>
  </div>

Ahora align-self-center obtendrá espacio para encajar verticalmente.

1
Hareesh 14 nov. 2017 a las 10:20

Aplicar el siguiente CSS al div padre

Cdoepen actualizado https://codepen.io/anon/pen/oowaav

.parentdiv{
    align-items: center;
    display: flex;
    height: 100vh;
}
1
Znaneswar 14 nov. 2017 a las 08:47