我的注册的盒子无法移动到居中的位置
html部分代码如下
<body>
<div class="login">
<h2>用户注册</h2>
<a href="javascript:void(0)">
注册
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<div class="signup">
<p>已有账号 <a href="login.html">立即登录</a></p>
</div>
</div>
</body>
css部分代码如下
```css
.login {
/* 弹性布局 让子元素称为弹性项目 */
display: flex;
/* 让弹性项目垂直排列 原理是改变弹性盒子的主轴方向 父元素就是弹性盒子 现在改变后的主轴方向是向下了 */
flex-direction: column;
/* 让弹性项目在交叉轴方向水平居中 现在主轴的方向是向下 交叉轴的方向是与主轴垂直 交叉轴的方向是向右 */
align-items: center;
width: 400px;
padding: 60px;
background-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
background: linear-gradient(#141e30, #243b55) ;
position: relative;
}
.login a {
overflow: hidden;
position: relative;
padding: 10px 20px;
color: #03e9f4;
/* 取消a表现原有的下划线 */
text-decoration: none;
/* 同样加个过渡 */
transition: all 0.5s;
}
```
