CSS : center form in page horizontally and vertically

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)