一般登录页有两种方式：1.定宽高 （根据单位px和%分两种情况）2.不定宽高。
1.定宽高类型（定位问题（注意决对定位使用的条件。自行百度很详细清楚））
情况一（单位是px时）只需要用绝对定位到屏幕中间，然后利用margin-left和margin-top取值就可以实现。
.a {
border: 1px solid #00caca;
width: 600px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
/* flex让内部div水平垂直居中 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.b {
border: 1px solid #00cacc;
width: 70%;
height: 70%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.c {
border: 1px solid #00fffb;
width: 60%;
height: 60%;
}
<body>
<div class="a">
<div class="b">
<div class="c">ssssss</div>
</div>
</div>
</body>
情况二（单位是%）：由于%是基于父元素宽高，采用margin-left值为负本身宽高一半失效，因此，需要计算定位top 和 left值，使其居中。代码如下，其中，HTML结构不变。
body {
/* 需要给body设置宽高 */
width: 100%;
height: 100%;
}
.a {
border: 1px solid #0000dd;
width: 80%;
height: 80%;
position: absolute;
/* 根据自身宽高占body的80%，推算定位top值 */
top: 10%;
left: 10%;
margin-left: 0;
margin-top: 0;
/* flex让内部div水平垂直居中 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.b {
border: 1px solid #0000dd;
width: 70%;
height: 60%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.c {
border: 1px solid #00fffb;
width: 50%;
height: 50%;
}
<body>
<div class="a">
<div class="b">
<div class="c">ssssss</div>
</div>
</div>
</body>
2.不定宽高
2.1.父盒子设置：
display:table-cell;
text-align:center;
vertical-align:middle;
2.2
display:inline-block;
vertical-align:middle;
2.3.使用CSS3 transform
父盒子设置：position:relative
Div设置：transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;