使用flex布局编写登录框

由于之前从来没有写过登录框，今天就想着自己动手写一个简单的登录框，主要是写出登录框的大概布局.因为是新手有不足之处还请各位大佬指出：

一，思路

１，页面背景是一张图片

２，登录框在居中

下面来看一下写出来的效果：

这是整体看上去的效果，下面来来看一下，局部的效果：

 

可能配色不太美观，但是大体的布局是这样．整体采用了flex布局，层层嵌套．

二，代码实现

<div class="top">
    <div class="login-box">
        <h2>用户登录</h2>
        <span></span>
        <div class="form">
            <label for="user">用户名:</label>
            <input type="text" class="input-box" id="user">
        </div>
        <div class="form">
            <label for="password">密　码:</label>
            <input type="text" class="input-box" id="password">
        </div>
        <div class="form">
            <label for="valide-code">验证码:</label>
            <input type="text" class="input-box1" id="valide-code">
        </div>
        <div class="form">
            <button type="button" id="login-button">登　录</button>
        </div>
        <div class="ip">
            <span id="ip-show"></span>
        </div>
    </div>


</div>

首先将大盒子（登录框主体）居中：

.top {
    display: flex;
    height: 600px;
    justify-content: center;
    /*flex-direction: column;*/
    align-items: center;
}

这里注意，父级元素必须有高度，即一定要设置height的值，不然align-items: center不起作用．　

其次是设置登录框中的元素在侧轴上的居中：

.top {
    display: flex;
    height: 600px;
    justify-content: center;
    /*flex-direction: column;*/
    align-items: flex-end;
}

.login-box {
    display: flex;
    width: 500px;
    height: 520px;
    border: 1px yellow solid;
    background: white;
    margin: 2px;
    text-align: center;
    border-radius: 20px;
    flex-direction: column;
    justify-content: flex-start;
    /*align-items: flex-start;*/
}