How to center div vertically with flexbox

Question

How to center div vertically with flexbox

Navigation

#1 by (2 votes)

2

I want to center the <div="container"> vertically with flexbox, I'm learning it but I can not focus, I'm using the justify-content: center to adjust it to the center (horizontally) and align-items:center (To adjust the center vertically), but only I take the justify-content the align-items do not take it.

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

css flexbox

asked by Victor Escalona 17.06.2018 в 07:08

source

1 answer

Search for a word within the Java Files variable What is the similar setw (40) setfill ('=') of C ++ in C #?

score 2 · Accepted Answer

You're really not doing it wrong and it's centering vertically, but we do not see it because the body is self-adjusting to the size of the div container . But if we give the body a height of 100% in this case, you can see how the div is centered correctly.

  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>