Como centrar div verticalmente con flexbox

publicado por: Anonymous

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;
}

solución

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.

_x000D_

_x000D_

  html{ height:100%; }_x000D_
  body{_x000D_
      background: #978;_x000D_
      margin:0;_x000D_
      display: -webkit-box;_x000D_
      display: -moz-box;_x000D_
      display: -ms-flexbox;_x000D_
      display: -webkit-flex;_x000D_
      display: flex;_x000D_
      justify-content: center;_x000D_
      align-items: center;_x000D_
      height:100%;_x000D_
  }_x000D_
  .container{_x000D_
    height: 200px; _x000D_
    width: 300px; _x000D_
    background: #fff;		    _x000D_
  }

_x000D_

<html>_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
  <div class="container">_x000D_
    <form action="index_submit" method="get" accept-charset="utf-8">_x000D_
    _x000D_
      <input type="text" name="" id="inputuser" placeholder="Username">_x000D_
      <input type="password" name="" id="inputpass" placeholder="Password">                   _x000D_
      <button class="buton">Log in</button>_x000D_
      _x000D_
    </form>     _x000D_
  </div>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.