html - Center align a table vertically and horizontally -

.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>

doubts

1) tried display: table , tabel-cell vertical-align:middle not working in scenario. , data not tabular, don't think right way.

2) don't prefer position absolute top , left values in %. if don't other options, go one.

is there other possibilities center align div? or 1 should use in above 2 options? if have choose option1, it's not working in case.

i don't prefer margin center align this. , flex not supported ie.

margin:0 auto width:350px center aligned div.

any suggestions?

your code

body, html - default - 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>

so centered necessary body , html add - 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>