我有一个登录页面，我想把表单元素对齐到页面的中心。
null
.signininp {
border-radius: 20px;
width: 20%;
margin-top: 10px;
padding: 5px;
}<form>
<input class="signininp" type="input" name="email">
<br>
<input class="signininp" type="input" name="pass">
<br>
<input class="signininp" type="submit" name="submit" value="Giriş Yap">
</form>null
您可以使用flex与页面中心对齐--只需用display:flex and height:100VH将表单包装在div中--然后将margin:auto应用于表单。
null
.form-wrapper {
display: flex;
height: 100vh;
}
form {
margin: auto
}<div class="form-wrapper">
<form>
<input class="signininp" type="input" name="email"/>
<br>
<input class="signininp" type="input" name="pass"/>
<br>
<input class="signininp" type="submit" name="submit" value="Giriş Yap">
</form>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
添加以下CSS:
body {
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
height: 100vh;
}
form{
width: 20%;
}
