CSS practice, for help-CodePudding

Target rendering: at present, the gap is still a little far

 & lt; ! DOCTYPE html> 
 
 
<meta charset="utf-8" & gt; 
<meta name="viewport" content="width=device - width" & gt; 
 JS Bin 
<style type="text/CSS" & gt; 
* {
background-color: red; 
Background - attachment: fixed; 
Background - size: 100% 100%; 
background-repeat: no-repeat; 
margin: 0; 
padding: 0; 
} 
The top {
position:relative; 
Height: 180 px; 
display: flex; 
} 
. Top. Img {
height: 80px; 
Width: 80 px; 
} 

. The content {
Margin: 50 px; 
} 
. Content. F - row {
display: flex; 
margin-top: 10px; 
The flex - wrap: nowrap; 
flex-direction: row; 
text-align: center; 
The justify - content: space - between; 
} 

. The rect {
The text - align: center; 
Border - width: 1 px; 
Border - style: solid; 
Border - color: RGB (255, 255, 255); 
Width: 30%; 
Height: 0; 
Padding - bottom: 30%; 
} 

W. - the rect {
Border - width: 1 px; 
Border - style: solid; 
Border - color: RGB (255, 255, 255); 
Width: 65%; 
Height: 0; 
Padding - bottom: 30%; 
} 


. Content. S - row {
display: flex; 
flex-direction: row; 
The flex - wrap: nowrap; 
text-align: center; 
The justify - content: space - between; 

} 
</style> 
 
<body> 
 Registration/login & lt;/span>

To solve the problem: 1, text vertical center
2, how to start on the specified location layout