What is the best way to align a form in the center of a page both horizontally and vertically

Question

What is the best way to align a form in the center of a page both horizontally and vertically

Currently, this is the HTML code I am working with:

<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">Connect</button>
        </p>
    </form>
</body>

I attempted the following CSS to center my form but unfortunately it remains off-center:

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

html css

Answer 1

Answer №1

Using the grid layout is a popular choice, especially when the form is the only element in the body of the document, resulting in shorter and more concise code.

html {
  min-height: 100%;/* occupy full screen height for vertical alignment */
  display: grid; /* alternatively, you can use display:flex if the body is the sole 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">Log In</button>
  </p>
</form>

You can achieve similar results using display:flex: http://codepen.io/anon/pen/yCKuz

html,body {
  height:100%;
  width:100%;
  margin:0;
}
body {
  display:flex;
}
form {
  margin:auto;/* automatic centering both horizontally and vertically with flexbox */
}

Another option is to use display:table: http://codepen.io/anon/pen/LACnF/ (this approach is recommended for emails where table layouts are common)

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

Answer 2

Using the grid layout is a popular choice, especially when the form is the only element in the body of the document, resulting in shorter and more concise code.

html {
  min-height: 100%;/* occupy full screen height for vertical alignment */
  display: grid; /* alternatively, you can use display:flex if the body is the sole 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">Log In</button>
  </p>
</form>

You can achieve similar results using display:flex: http://codepen.io/anon/pen/yCKuz

html,body {
  height:100%;
  width:100%;
  margin:0;
}
body {
  display:flex;
}
form {
  margin:auto;/* automatic centering both horizontally and vertically with flexbox */
}

Another option is to use display:table: http://codepen.io/anon/pen/LACnF/ (this approach is recommended for emails where table layouts are common)

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

Answer 3

Answer №2

To achieve horizontal centering, enclose the form within a DIV tag and apply the align="center" attribute. This will ensure that the form remains centered even if its width changes.

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

UPDATE:

@G-Cyr is correct. The align="center" attribute is now considered obsolete. Instead, you can use the text-align attribute as demonstrated below.

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

This method will center all content inside the parent DIV. Another option is to utilize the margin: auto CSS attribute along with predefined widths and heights. For more details, refer to the provided link.

How to horizontally center a div in another div?

Vertical centering can be a bit trickier. To achieve this, follow these steps:

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 4

To achieve horizontal centering, enclose the form within a DIV tag and apply the align="center" attribute. This will ensure that the form remains centered even if its width changes.

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

UPDATE:

@G-Cyr is correct. The align="center" attribute is now considered obsolete. Instead, you can use the text-align attribute as demonstrated below.

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

This method will center all content inside the parent DIV. Another option is to utilize the margin: auto CSS attribute along with predefined widths and heights. For more details, refer to the provided link.

How to horizontally center a div in another div?

Vertical centering can be a bit trickier. To achieve this, follow these steps:

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 5

Answer №3

When utilizing a negative translateX/Y, the need for specifying width and height in the style is eliminated, resulting in a more concise code.

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

Another option would be to implement display: grid (refer to 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>

Answer 6

When utilizing a negative translateX/Y, the need for specifying width and height in the style is eliminated, resulting in a more concise code.

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

Another option would be to implement display: grid (refer to 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>

Answer 7

Answer №4

Even after simplifying the code, the accepted solution didn't work for my form. If you're facing the same issue, I suggest giving my alternative a shot. Essentially, you keep the Top and Left values at 50% like the original poster did, but offset the form's container with negative margins equal to half of the div's height and width on the top and left sides respectively. This adjustment shifts the center point of the Top and Left coordinates to the middle of the form. It's crucial to specify the height and width of the form (rather than making them relative). For instance, a form div sized at 300x300px and with -150px margins on the top and left will be perfectly centered regardless of 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

If you're wondering why I included a container for the form, it's because I prefer having the option to place other elements near the form and ensure they are also centered. While unnecessary in this specific scenario, the form container could prove beneficial in different scenarios. I hope this explanation is helpful!

Answer 8

Even after simplifying the code, the accepted solution didn't work for my form. If you're facing the same issue, I suggest giving my alternative a shot. Essentially, you keep the Top and Left values at 50% like the original poster did, but offset the form's container with negative margins equal to half of the div's height and width on the top and left sides respectively. This adjustment shifts the center point of the Top and Left coordinates to the middle of the form. It's crucial to specify the height and width of the form (rather than making them relative). For instance, a form div sized at 300x300px and with -150px margins on the top and left will be perfectly centered regardless of 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

If you're wondering why I included a container for the form, it's because I prefer having the option to place other elements near the form and ensure they are also centered. While unnecessary in this specific scenario, the form container could prove beneficial in different scenarios. I hope this explanation is helpful!

Answer 9

Answer №5

Have you considered utilizing a CSS grid? It's already 2019 and the browser support for it is quite good.

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 10

Have you considered utilizing a CSS grid? It's already 2019 and the browser support for it is quite good.

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 11

Answer №6

If you're looking for a solution that works efficiently, I recommend using bootstrap:

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

Answer 12

If you're looking for a solution that works efficiently, I recommend using bootstrap:

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

Answer 13

Answer №7

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

Answer 14

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

Answer 15

Answer №8

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;

}

Answer 16

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;

}

What is the best way to align a form in the center of a page both horizontally and vertically

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Disappearing table borders in print view on Firefox

How can I stop MUI Button from automatically becoming fullWidth?

Establishing limits for a division using keyboard commands

Customize Bootstrap 4 Carousel: Set specific data-interval for each slide

Guide to activating the timer specifically on select pages with jQuery Mobile

What could be causing the issue with the 100% height and 100% width not functioning properly on my ASPX page?

Passing PHP value from a current page to a popup page externally: A guide

In the realm of HTML Canvas, polygons intricately intertwine with one another

Achieving right-aligned buttons in Bootstrap

Issue with importing a file using JQuery causing the click event to not function properly

Utilizing an array of font styles in a single line while maintaining a consistent width

What's causing ng-show to malfunction in IE11 on AngularJS?

Develop a CSS layout for the specified design

The Razor MVC does not support HTML syntax within an If condition

Why does Froala Editor not maintain formatting when retrieving data from the database?

Ways to create a self-contained video viewer

What strategies can be used to scale up a website's images in proportion to their page views or traffic?

The Ajax load() function is malfunctioning

The challenge of navigating CSS specificity guidelines

"Creating a HTML Table with Merged Cells using colspan and rowspan