頁面大於所需大小的問題； React.js

Question

當前頁面如下所示： 正如您所看到的，頂部有許多空白區域。我似乎不知道該如何讓那個空白消失。這是 HTML：

<div className="auth-form-container" style={{display: 'flex',  justifyContent:'center', alignItems:'center', height: '100%'}}>
            <img src={logo} alt="VaporCode Logo"></img>
            <h2 style={{ color: 'white' }}>Register</h2>
        <form className="register-form" onSubmit={handleSubmit}>
            <label htmlFor="firstname" style={{ color: 'white' }}>First Name</label>
            <input value={firstname} firstname="firstname" id="firstname" placeholder="First Name" />
            <label htmlFor="lastname" style={{ color: 'white' }}>Last Name</label>
            <input value={lastname} lastname="lastname" id="lastname" placeholder="Last Name" />
            <label htmlFor="email" style={{ color: 'white' }}>Email</label>
            <input value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="Email" id="email" name="email" />
            <label htmlFor="username" style={{ color: 'white' }}>Userame</label>
            <input value={username} username="username" id="username" placeholder="Username" />
            <label htmlFor="password" style={{ color: 'white' }}>Password</label>
            <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="Password" id="password" name="password" />
            <label htmlFor="repeatpassword" style={{ color: 'white' }}>Retype Password</label>
            <input value={reppass} onChange={(e) => setrepPass(e.target.value)} type="password" placeholder="Retype Password" id="repeatpassword" nam>
            <button type="submit">Register</button>
        </form>
        <linkbutton className="link-btn" onClick={() => props.onFormSwitch('login')}>Already have an account? Login here.</linkbutton>
        <div style={{ display: "flex", justifyContent: "center" }}>
            <iframe src="https://www.guilded.gg/canvas_index.html?route=%2Fcanvas%2Fembed%2Fbadge%2F4R5YgKWR" width="294" height="48" frameborder="0">
        </div>
    </div>

請注意，由於某些函數很長，因此由於我透過 SSH 進行編程，因此程式碼無法正確複製。如果有人有更好的解決方案，將不勝感激。 （我正在運行一個沒有用戶界面的 vps） 這是 CSS：

App {
  text-align: center;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  color: #000000;
  background-image: linear-gradient(79deg, #073a8c, #281369 48%, #135b69);
}

.auth-form-container, .login-form, .register-form {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 600px)  {
  .auth-form-container {
    position:absolute;   
    justify-content: center;
    padding: 1rem;
    border: solid #222222;
    background-color: #000000;
    fill: solid #000000;
    border-radius: 10px;
    margin:30rem;
  }
}

label {
  text-align: left;
  padding: 0.25rem 0;
}
input {
  margin: 0.5rem 0;
  padding: 1rem;
  border: none;
  border-radius: 10px;
}


button {
  border: none;
  background-image: linear-gradient(79deg, #ff893f, #fa8d90 48%, #e769d1);
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
  font-weight : bold;
  transition-duration: 2s;
}


linkbutton {
  border: none;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
}

.link-btn {
  background: none;
  color: white;
  text-decoration: underline;
}
img {
    margin: 0 auto;
    max-width: 10%;
    height: 10%;
}

我正在react.js中對此進行程式設計。

我嘗試強制該位置為絕對位置，但這使頁面在較小的螢幕上看起來很奇怪。最後，我希望登入容器靠近螢幕頂部。請記住，我不希望它出現在 CSS 中，如果可能的話，我希望它出現在 HTML 中。

另外，如果有人有關於不透過 ssh 進行遠端程式設計的建議，請聯絡我！ ;)

-謝謝！ :)

Answer 1

如果您使用flexbox居中內容，使用App選擇器，然後將.auth-form-container設定為具有height：100％將填充整個容器高度，因此30rem margin-top可能是被淘汰。嘗試一下，如果它不起作用，請附加一個工作片段，以便我們可以看到真正的問題。希望對您有幫助！