CSS : center form in page horizontally and vertically

Question

How can i center the form called form_login horizontally and vertically in my page ?

Here is the HTML I'm using right now:

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

I have tried to do the following css but my form is never centered :

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

You need to give something a width first – Déjà vu Mar 26 '14 at 10:35 — Déjà vu, Mar 26 '14 at 10:35

G-Cyrillus · Answer 1 · 2023-05-14T19:32:56.003

Edit nowdays, grid is widely supported and if the form stands all alone in body, the code can be shortened.

html {
  min-height: 100%;/* fill the screen height to allow vertical alignement */
  display: grid; /* display:flex works too since body is the only grid cell */
}

body {
  margin: auto;
}

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

you can use display:flex to do this : 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 :) */
}

or display:table http://codepen.io/anon/pen/LACnF/ (for a mail, use a table instead display)

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

Just to be clear, you can use flex on a block element containing the thing in question. If you do it to the body, it will flex the whole page. :) — androidguy, May 01 '18 at 06:48
For me (not using flex; grid) the `margin:auto` was key to horizontally centering a form: `form { width: 600px; margin:auto; }` — Victoria Stuart, Jul 18 '23 at 19:05

A.M.N.Bandara · Accepted Answer · 2019-04-23T09:14:30.527

If you want to do a horizontal centering, just put the form inside a DIV tag and apply align="center" attribute to it. So even if the form width is changed, your centering will remain the same.

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

UPDATE

@G-Cyr is right. align="center" attribute is now obsolete. You can use text-align attribute for this as following.

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

This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.

How to horizontally center a in another ?

Vertical centering is little difficult than that. To do that, you can do the following stuff.

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

Just updated the attribute from "css" to "style". Thanks @Swift. — A.M.N.Bandara, Apr 23 '19 at 09:15

Fabrizio Calderan · Answer 3 · 2021-02-03T08:48:44.903

if you use a negative translateX/Y width and height are not necessary and the style is really short

#form_login {
    left      : 50%;
    top       : 50%;
    position  : absolute;
    transform : translate(-50%, -50%);
}

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

Alternatively you could use display: grid (check the full page view)

body {
   margin        : 0;
   padding       : 0;
   display       : grid;
   place-content : center;
   min-height    : 100vh;
}

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

score 9 · Answer 4 · answered Oct 13 '14 at 21:48

The accepted answer didn't work with my form, even when I stripped it down to the bare minimum and copied & pasted the code. If anyone else is having this problem, please give my solution a try. Basically, you set Top and Left to 50% as the OP did, but offset the form's container with negative margins on the top and left equal to 50% of the div's height and width, respectively. This moves the center point of the Top and Left coordinates to the center of the form. I will stress that the height and width of the form must be specified (not relative). In this example, a 300x300px form div with margins of -150px on the top and left is perfectly centered no matter the window size:

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

Now, for those wondering why I used a container for the form, it's because I like to have the option of placing other elements in the form's vicinity and having them centered as well. The form container is completely unnecessary in this example, but would definitely be useful in other cases. Hope this helps!

Alex Nolasco · Answer 5 · 2019-07-15T02:37:27.227

How about using a grid? it's 2019 and support is 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>

score 0 · Answer 6 · answered Mar 01 '17 at 19:20

I suggest you using bootstrap which works perfectly:

@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;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page | ... </title>

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
</head>

<body>

 <div class="container container-table">
  <div class="row vertical-center-row">
   <div class="text-center col-md-4 col-md-offset-4" style="">
      <form id="login" action="dashboard.html" method="post">
     
     <div class="username">
      <div class="usernameinner">
       <input type="text" name="username" id="username" placeholder="Login" />
      </div>
     </div>
     
     <div class="password">
      <div class="passwordinner">
       <input type="password" name="password" id="password" placeholder="Mot de passe" />
      </div>
     </div>
     
     <button id="login-button">Connexion</button>
     
     <div class="keep"><input type="checkbox" /> Gardez moi connecté</div>
    
    </form>
   </div>
  </div>
 </div>
</body>
</html>

score 0 · Answer 7 · answered Jul 28 '21 at 20:18

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

score 0 · Answer 8 · answered Jul 12 '23 at 11:43

0

html

 <form action="/datahand.php">
            <label for="luname" >EnterUserName</label>
            <input type="text" name="luname" class="inusername"  >
            <label for="lpassword" >EnterPassword</label>
            <input type="password" name="lpassword" class="ipassword"  >
        </form>

css style

 hereform
{
position: relative;
top: 50%;
background-color: burlywood;
width: 300px;
height: 200px;
display: block;
text-align: -webkit-center;

}

answered Jul 12 '23 at 11:43

Omar_abdelslam

21
2

It's better to include an explanation of how your answer addresses the question. Answers that only include code don't really benefit people much. – Sally loves Lightning Jul 15 '23 at 11:15

CSS : center form in page horizontally and vertically

8 Answers8

Linked

Related