中心對齊表格垂直和水平

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？或者我應該在以上兩個選項中使用哪一個？如果我必須選擇option1，則不適用於我的情況。

我不喜歡margin來居中對齊。 IE不支持flex。

margin:0 auto與width:350px成功對齊div。

有什麼建議嗎？

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 +這裏它是，看到了內嵌評論。

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