如何将表单元素与页面中心对齐？ [复制]答案

【问题标题】：How to align a form element to the center of the page? [duplicate]如何将表单元素与页面中心对齐？ [复制]
【发布时间】：2020-07-19 11:08:33
【问题描述】：

我有一个登录页面，我想将表单元素与页面中心对齐。

.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>

【问题讨论】：

我不能用''元素做我想做的事。
忘记中心元素，它已经过时了。

标签： html css forms

【解决方案1】：

您可以使用 flex 来对齐页面的中心 - 只需使用 display:flex and height:100vh 将表单包裹在一个 div 中 - 然后将 margin:auto 应用于您的表单。

.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>

您还可以在父元素上使用 display: grid, height: 100vh and place-items:center - 它有效地将 align-items: center 和 justify-content: center 组合在父 div 上。

.form-wrapper {
  display: grid;  
  height: 100vh;
  place-items: center;
}

<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>

【讨论】：

【解决方案2】：

添加以下css：

body {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
form{
    width: 20%;
}

【讨论】：

【解决方案3】：

结帐使用<center>tag，它解决了我的大部分html问题

 `   <center><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></center>`

【讨论】：

它在html 4中使用，它是以前的版本。但不是在html5中check this了解中心标签的替换
@GiritejaBille 谢谢，我知道因为我是编程新手，我才 15 岁

【解决方案4】：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

【讨论】：

我试过这样的代码，但它对我不起作用
您好！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的回答添加解释并说明适用的限制和假设。

【解决方案5】：

将表单放在 div 标签内，然后

 div
{
  margin-left: 50%;
}

将此添加到您的 css 文件中。

【讨论】：