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%;
}
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;
}
How about using a grid? it's 2019 and support is reasonable
body {_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
background-color: red;_x000D_
}_x000D_
_x000D_
.content {_x000D_
display: grid;_x000D_
background-color: bisque;_x000D_
height: 100vh;_x000D_
place-items: center;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<body>_x000D_
<div class="content">_x000D_
<form action="#" method="POST">_x000D_
<fieldset>_x000D_
<legend>Information:</legend>_x000D_
<label for="name">Name:</label>_x000D_
<input type="text" id="name" name="user_name">_x000D_
</fieldset>_x000D_
<button type="button" formmethod="POST" formaction="#">Submit</button>_x000D_
</form>_x000D_
</div>_x000D_
</body>_x000D_
</html>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>I suggest you using bootstrap which works perfectly:
@import url('http://getbootstrap.com/dist/css/bootstrap.css');_x000D_
html, body, .container-table {_x000D_
height: 100%;_x000D_
}_x000D_
.container-table {_x000D_
display: table;_x000D_
}_x000D_
.vertical-center-row {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">_x000D_
<html xmlns="http://www.w3.org/1999/xhtml">_x000D_
<head>_x000D_
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1.0" />_x000D_
<title>Login Page | ... </title>_x000D_
_x000D_
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<div class="container container-table">_x000D_
<div class="row vertical-center-row">_x000D_
<div class="text-center col-md-4 col-md-offset-4" style="">_x000D_
<form id="login" action="dashboard.html" method="post">_x000D_
_x000D_
<div class="username">_x000D_
<div class="usernameinner">_x000D_
<input type="text" name="username" id="username" placeholder="Login" />_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<div class="password">_x000D_
<div class="passwordinner">_x000D_
<input type="password" name="password" id="password" placeholder="Mot de passe" />_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<button id="login-button">Connexion</button>_x000D_
_x000D_
<div class="keep"><input type="checkbox" /> Gardez moi connecté</div>_x000D_
_x000D_
</form>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</body>_x000D_
</html>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;
}
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!
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/
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;
}
Source: Stackoverflow.com