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    lt body gt       lt form id  form login  gt           lt p gt               lt input type  text  id  username  placeholder  username    gt           lt  p gt           lt p gt               lt input type  password  id  password  placeholder  password    gt           lt  p gt           lt p gt               lt input type  text  id  server  placeholder  server    gt           lt  p gt           lt p gt               lt button id  submitbutton  type  button  gt Se connecter lt  button gt           lt  p gt       lt  form gt   lt  body gt    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

User · Accepted Answer

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

User · Answer

The accepted answer didn t work with my form  even when I stripped it down to the bare minimum and copied  amp  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    lt body gt       lt div class  login div  gt           lt form class  login form  action     gt           lt  form gt       lt  div gt   lt  body gt    CSS    login div       position  absolute       width  300px      height  300px          Center form on page horizontally  amp  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

User · Answer

I suggest you using bootstrap which works perfectly    x000D   x000D   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    x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   lt head gt  x000D   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt  x000D   lt meta name  viewport  content  width device-width  initial-scale 1 0    gt  x000D   lt title gt Login Page        lt  title gt  x000D   x000D   lt script src  http   cdnjs cloudflare com ajax libs twitter-bootstrap 2 1 0 bootstrap min js  gt  lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D    lt div class  container container-table  gt  x000D     lt div class  row vertical-center-row  gt  x000D      lt div class  text-center col-md-4 col-md-offset-4  style    gt  x000D         lt form id  login  action  dashboard html  method  post  gt  x000D        x000D        lt div class  username  gt  x000D         lt div class  usernameinner  gt  x000D          lt input type  text  name  username  id  username  placeholder  Login    gt  x000D         lt  div gt  x000D        lt  div gt  x000D        x000D        lt div class  password  gt  x000D         lt div class  passwordinner  gt  x000D          lt input type  password  name  password  id  password  placeholder  Mot de passe    gt  x000D         lt  div gt  x000D        lt  div gt  x000D        x000D        lt button id  login-button  gt Connexion lt  button gt  x000D        x000D        lt div class  keep  gt  lt input type  checkbox    gt  Gardez moi connect   lt  div gt  x000D       x000D       lt  form gt  x000D      lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

if you use a negative translateX Y width and height are not necessary and the style is really short  x000D   x000D   form login       left        50       top         50       position    absolute      transform   translate -50   -50      x000D   lt form id  form login  gt     lt p gt          lt input type  text  id  username  placeholder  username    gt     lt  p gt     lt p gt         lt input type  password  id  password  placeholder  password    gt     lt  p gt     lt p gt         lt input type  text  id  server  placeholder  server    gt     lt  p gt     lt p gt         lt button id  submitbutton  type  button  gt Se connecter lt  button gt     lt  p gt   lt  form gt  x000D   x000D   x000D    Alternatively you could use display  grid  check the full page view   x000D   x000D  body      margin          0     padding         0     display         grid     place-content   center     min-height      100vh    x000D   lt form id  form login  gt     lt p gt          lt input type  text  id  username  placeholder  username    gt     lt  p gt     lt p gt         lt input type  password  id  password  placeholder  password    gt     lt  p gt     lt p gt         lt input type  text  id  server  placeholder  server    gt     lt  p gt     lt p gt         lt button id  submitbutton  type  button  gt Se connecter lt  button gt     lt  p gt   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

How about using a grid  it s 2019 and support is reasonable   x000D   x000D  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    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   lt div class  content  gt  x000D     lt form action     method  POST  gt  x000D       lt fieldset gt  x000D         lt legend gt Information  lt  legend gt  x000D         lt label for  name  gt Name  lt  label gt  x000D         lt input type  text  id  name  name  user name  gt  x000D       lt  fieldset gt  x000D       lt button type  button  formmethod  POST  formaction     gt Submit lt  button gt  x000D     lt  form gt  x000D    lt  div gt  x000D    lt  body gt  x000D    lt  html gt  x000D   x000D   x000D

[html] CSS : center form in page horizontally and vertically

Examples related to html

Examples related to css