发表新帖
发表新帖

CSS : center form in page horizontally and vertically

后端 未结
关注
6 1609
执念已碎
执念已碎 2020-12-13 01:33

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

Here is the HTML I\'m using right now:
相关标签:
6条回答
  • 自闭症患者
    2020-12-13 01:39

    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;
}
    0 讨论(0)
  • 挽巷
    2020-12-13 01:50

    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;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

    Example on codepen: http://codepen.io/anon/pen/ntbFo

    Support: http://caniuse.com/transforms3d

    0 讨论(0)
  • 轻奢々
    2020-12-13 01:58

    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>

    0 讨论(0)
  • 悲哀的现实
    2020-12-13 02:00

    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;
}
    0 讨论(0)
  • 挽巷
    2020-12-13 02:00

    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!

    0 讨论(0)
  • 北荒
    2020-12-13 02:02

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题