центр выравнивания таблицы по вертикали и по горизонтали

Question

.cls_forgotpwd_container 
 
{ 
 
    font-family: sans-serif; 
 
    font-size: 13px; 
 
    width: 350px; 
 
    /*margin: auto;*/ 
 
    width: 350px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.cls_forgotpwd_table label 
 
{ 
 
    margin-right: 10px; 
 
} 
 

 
.cls_forgotpwd_table input[type="password"] 
 
{ 
 
    width: 200px; 
 
    height: 20px; 
 
    border: 1px solid #555; 
 
} 
 

 
body 
 
{ 
 
    display: table; 
 
}

<div class="cls_forgotpwd_container"> 
 
    <form class="cls_forgotpwd_form" id="forgotpwd_form"> 
 
     <table class="cls_forgotpwd_table"> 
 
      <tbody> 
 
      <tr> 
 
       <td><label>Password</label></td> 
 
       <td><input type="password" name="password"></input></td> 
 
      </tr> 
 
       <td><label>Confirm Password</label></td> 
 
       <td><input type="password" name="confirm_password"></input></td> 
 
      <tr> 
 
       <td><input class="cls_submit" type="submit" name="submit" value="Change It"></input></td> 
 
      </tr> 
 
      <tr> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
    </form> 
 
</div>

Сомнения

1) Я попытался display: table и tabel-cell with vertical-align:middle Но он не работает в моем сценарии. И эти данные не являются табличными, поэтому я не думаю, что это правильный путь.

2) Я не предпочитаю position absolute с top and left values in %. Если у меня нет других вариантов, я пойду с этим.

Есть ли другие возможности выравнивания по центру div? Или какой из них я должен использовать в двух указанных выше вариантах? Если мне нужно выбрать вариант1, он не работает в моем случае.

Я не предпочитаю margin для выравнивания по центру. И flex не поддерживается IE.

margin:0 auto с width:350px успешно выровненный по центру отдел.

Любые предложения?

Answer 1

код

body, html - по умолчанию - height: auto;width: auto;

.cls_forgotpwd_container 
 
{ 
 
    font-family: sans-serif; 
 
    font-size: 13px; 
 
    width: 350px; 
 
    /*margin: auto;*/ 
 
    width: 350px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.cls_forgotpwd_table label 
 
{ 
 
    margin-right: 10px; 
 
} 
 

 
.cls_forgotpwd_table input[type="password"] 
 
{ 
 
    width: 200px; 
 
    height: 20px; 
 
    border: 1px solid #555; 
 
} 
 

 
body 
 
{ 
 
    display: table; 
 
    border: 2px solid #f00; 
 
}

<div class="cls_forgotpwd_container"> 
 
    <form class="cls_forgotpwd_form" id="forgotpwd_form"> 
 
     <table class="cls_forgotpwd_table"> 
 
      <tbody> 
 
      <tr> 
 
       <td><label>Password</label></td> 
 
       <td><input type="password" name="password"></input></td> 
 
      </tr> 
 
       <td><label>Confirm Password</label></td> 
 
       <td><input type="password" name="confirm_password"></input></td> 
 
      <tr> 
 
       <td><input class="cls_submit" type="submit" name="submit" value="Change It"></input></td> 
 
      </tr> 
 
      <tr> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
    </form> 
 
</div>

так, что бы в центре необходимо для body и html оных - height: 100% и width: 100%

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    display: table;  
 
    border: 3px solid #f00; 
 
} 
 

 
.cls_forgotpwd_container { 
 
    font-family: sans-serif; 
 
    font-size: 13px; 
 
    width: 350px;  
 
    border: 1px solid #ccc; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
.cls_forgotpwd_container form{ 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
} 
 
.cls_forgotpwd_table label { 
 
    margin-right: 10px; 
 
} 
 
.cls_forgotpwd_table input[type="password"] { 
 
    width: 200px; 
 
    height: 20px; 
 
    border: 1px solid #555; 
 
}

<div class="cls_forgotpwd_container"> 
 
    <form class="cls_forgotpwd_form" id="forgotpwd_form"> 
 
     <table class="cls_forgotpwd_table"> 
 
      <tbody> 
 
       <tr> 
 
        <td> 
 
         <label>Password</label> 
 
        </td> 
 
        <td> 
 
         <input type="password" name="password"></input> 
 
        </td> 
 
       </tr> 
 
       <td> 
 
        <label>Confirm Password</label> 
 
       </td> 
 
       <td> 
 
        <input type="password" name="confirm_password"></input> 
 
       </td> 
 
       <tr> 
 
        <td> 
 
         <input class="cls_submit" type="submit" name="submit" value="Change It"></input> 
 
        </td> 
 
       </tr> 
 
       <tr></tr> 
 
      </tbody> 
 
     </table> 
 
    </form> 
 
</div>

Answer 2

Это можно легко сделать с помощью CSS transform, поддержка браузера: IE9 +

JsFiddle Demo

.cls_forgotpwd_container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

Если вам нужна поддержка IE8 + здесь это, см. e комментарии inline.

JsFiddle Demo

html, body, .cls_forgotpwd_container { 
    height: 100%; /*make all the contaniers to 100% height*/ 
} 
body { 
    margin: 0; /*reset default margin*/ 
} 
.cls_forgotpwd_container { 
    display: table; 
    margin: 0 auto; /*horizontally center itself*/ 
} 
.cls_forgotpwd_form { 
    display: table-cell; 
    vertical-align: middle; /*vertically center things inside*/ 
} 

Существует небольшая проблема должна быть исправлена ​​- <input> само-закрывающий тег.

Это неправильно <input></input>

Это правильно <input> или <input/>