3

Quiero centrar el <div="container"> verticalmente con flexbox, lo estoy aprendiendo pero no logro que se centre, estoy utilizando el justify-content: center para ajustarlo al centro (horizontalmente) y align-items:center (Para ajustarlo al centro verticalmente), pero solo me toma el justify-content el align-items no me lo toma.

Html:

<div class="container" style="height: 200px; width: 300px; background: #fff;">
        <form action="index_submit" method="get" accept-charset="utf-8">

            <input type="text" name="" id="inputuser" placeholder="Username">


            <input type="password" name="" id="inputpass" placeholder="Password">                   

            <button class="buton">Log in</button>
        </form>     
    </div>

CSS3

body{
    background: #978;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    display: flex;
}

1 respuesta 1

3

Realmente no lo estás haciendo mal y está centrando verticalmente, pero no lo vemos porque el body se autoajusta al tamaño del div container. Pero si le damos una altura al body del 100% en este caso, podrás ver como se centra el div correctamente.

  html{ height:100%; }
  body{
      background: #978;
      margin:0;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
      height:100%;
  }
  .container{
    height: 200px; 
    width: 300px; 
    background: #fff;		    
  }
<html>
<head>
</head>
<body>
  <div class="container">
    <form action="index_submit" method="get" accept-charset="utf-8">
    
      <input type="text" name="" id="inputuser" placeholder="Username">
      <input type="password" name="" id="inputpass" placeholder="Password">                   
      <button class="buton">Log in</button>
      
    </form>     
  </div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.