CSS : center form in page horizontally and vertically

后端 未结 6 1630
执念已碎
执念已碎 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 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;
    }
    

提交回复
热议问题