Question

我想在中心做输入。她是代码：

    .input-container{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center
    
    }

    <!DOCTYPE html>
    <html>
    
    <head>
    <script src="/webcam.js"></script>
    <link rel="stylesheet" type="text/css" href="/CSS.css">
    </head>
    
    <body class="body">
    
     <div class="input-container">
           <input class="login" placeholder="login">
           <input class="password" placeholder="password">
     </div>
     
    </body>
    </html>

但你不能在中心做到这一点。但理论上它应该。可能是什么问题呢。谢谢你的时间！

Answer 1

您需要添加

flex-flow: row wrap;

使它们在中心侧面对齐。

Answer 2

为body，html和容器添加100％的高度。

<强> CSS：

html, body {
    height: 100%;
}
.input-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

应解决您的问题。 https://jsfiddle.net/m6wet5c7/7/

无法与flexbox对齐

2 个答案: