Question

如何在页面中水平和垂直居中调用form_login表单？

以下是我正在使用的HTML：

<body>
    <form id="form_login">
        <p>
            <input type="text" id="username" placeholder="username" />
        </p>
        <p>
            <input type="password" id="password" placeholder="password" />
        </p>
        <p>
            <input type="text" id="server" placeholder="server" />
        </p>
        <p>
            <button id="submitbutton" type="button">Se connecter</button>
        </p>
    </form>
</body>

我尝试过以下css，但我的表单从不居中：

#form_login {
    left: 50%;
    top: 50%;
    margin-left: -25%;
    position: absolute;
    margin-top: -25%;
}

Answer 1

您可以使用display:flex执行此操作：http://codepen.io/anon/pen/yCKuz

html,body {
  height:100%;
  width:100%;
  margin:0;
}
body {
  display:flex;
}
form {
  margin:auto;/* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */
}

或display:table http://codepen.io/anon/pen/LACnF/

body, html {   
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display:table;
}
body {
    display:table-cell;
    vertical-align:middle;
}
form {
    display:table;/* shrinks to fit content */
    margin:auto;
}

Answer 2

如果你想进行水平居中，只需将表格放在DIV标签内，然后应用align =＆＃34; center＆＃34;归因于它。因此，即使更改了表单宽度，您的居中也将保持不变。

<div align="center"><form id="form_login"><!--form content here--></form></div>

<强>更新

@ G-Cyr是对的。 align="center"属性现已过时。您可以使用text-align属性，如下所示。

<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>

这将使父DIV内的所有内容居中。可选方法是使用具有预定义宽度和高度的margin: auto CSS属性。请按照以下主题获取更多信息。

How to horizontally center a in another ?

垂直定心比这困难。为此，您可以执行以下操作。

<强> HTML

<body>
<div id="parent">
    <form id="form_login">
     <!--form content here-->
    </form>
</div>
</body>

<强>的CSS

#parent {
   display: table;
   width: 100%;
}
#form_login {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Answer 3

如果您使用负translateX/Y宽度和高度不是必需的，并且样式非常短

#form_login {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

关于codepen的示例：http://codepen.io/anon/pen/ntbFo

支持：http://caniuse.com/transforms3d

Answer 4

接受的答案对我的表格不起作用，即使我把它剥离到最低限度并复制＆amp;粘贴代码。如果其他人遇到此问题，请试试我的解决方案。基本上，你将Top和Left设置为50％，但是偏移了窗体的容器，顶部和左边的负边距分别等于div的高度和宽度的50％。这会将Top和Left坐标的中心点移动到窗体的中心。我将强调指定形式的高度和宽度必须（不是相对的）。在这个例子中，无论窗口大小如何，顶部和左侧边缘为-150px的300x300px格式div完全居中：

<强> HTML

<body>
    <div class="login_div">
        <form class="login_form" action="#">
        </form>
    </div>
</body>

<强> CSS

.login_div {
    position: absolute;

    width: 300px;
    height: 300px;

    /* Center form on page horizontally & vertically */
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}

.login_form {
    width: 300px;
    height: 300px;

    background: gray;
    border-radius: 10px;

    margin: 0;
    padding: 0;
}

JSFiddle

现在，对于那些想知道为什么我在表单中使用容器的人来说，这是因为我喜欢选择将其他元素放在表单的附近并让它们居中。在此示例中，表单容器是完全不必要的，但在其他情况下肯定会有用。希望这有帮助！

Answer 5

我建议你使用可以完美运行的bootstrap：

@Override
public void onMessageReceived(RemoteMessage remoteMessage) {
    Log.i("FIREBASE", remoteMessage.getNotification().getBody());
    if (ALLOW_NOTIFICATIONS){
        //show notification
    }
    else {
        //do nothing
    }
}

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

Answer 6

此处保证金：0自动；表示将与屏幕相对应地调整右边距，最大宽度：500px；对于较大的设备，该表单将位于500px上，而较小的移动设备将为200 px，因此该表单将始终保持在每个屏幕的中心。（主要是，对于Web开发，您要最大程度地避免使用负值。）

#form_login{
    max-width:500px;
    margin: 0px auto;
    top:50%;
    width:200px;
    }

<body>
   <div>
    <form id="form_login">
        <p>
            <input type="text" id="username" placeholder="username" />
        </p>
        <p>
            <input type="password" id="password" placeholder="password" />
        </p>
        <p>
            <input type="text" id="server" placeholder="server" />
        </p>
        <p>
            <button id="submitbutton" type="button">Se connecter</button>
        </p>
    </form>
   </div>
</body>

    


**

**

Answer 7

如何使用grid？是2019年，支持人员是reasonable

body {
  margin: 0;
  padding: 0;
  background-color: red;
}

.content {
  display: grid;
  background-color: bisque;
  height: 100vh;
  place-items: center;
}

<!DOCTYPE html>
<html>
<body>
<div class="content">
  <form action="#" method="POST">
    <fieldset>
      <legend>Information:</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name">
    </fieldset>
    <button type="button" formmethod="POST" formaction="#">Submit</button>
  </form>
 </div>
 </body>
 </html>

Answer 8

#form_login {
             height:500px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;  
        }

<form id="form_login">
        <p>
            <input type="text" id="username" placeholder="username"/>
        </p>
        <p>
            <input type="password" id="password" placeholder="password" />
        </p>
        <p>
            <input type="text" id="server" placeholder="server" />
        </p>
        <p>
            <button id="submitbutton" type="button">Se connecter</button>
        </p>
    </form>

CSS：水平和垂直页面的中心形式

8 个答案: