登陆注册页面的居中显示

在网页中，常常会使用到登陆注册功能，登陆框的显示要结合设备的尺寸进行居中显示，当我们使用前端框架(如React 或 Vue)时，登陆注册页面常常会作为一个组件，如何设置组件中的样式使得登陆框一直在屏幕上居中显示？

以React框架为例：登陆注册页面如图所示(此处以简书的登陆页进行说明)

登陆注册页面通常的效果图如图所示，在React中，我们使用组件化的开发，将该页面拆分为两个组件：整个背景图为一个大的容器组件、居中显示的是具体的注册登录页面；

如何使父组件占据整个背景图像区域？此处我们可以使用position来解决，例如父组件为LoginWrapper，

则LoginWrapper的样式为：

import styled from 'styled-components';

export const LoginWrapper = styled.div`

    z-index: 10;

    position: absolute;

    bottom: 0;

    top: 0;

    left: 0;

    right: 0;

    background: #f7f7f7;

`;

此时父组件便占据了整个背景区域，且背景区域的颜色也变为了设定值，接下来，我们只需要设置登录注册页面居中显示即可：假设登陆注册页面为LoginBox：

LoginBox：

export const LoginBox = styled.div`

    width: 400px;

    margin: 80px auto 0;

    height: 200px;

;

此时我们设置了登陆框距顶部80px，水平居中进行显示了