垂直和水平居中對齊表格

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）我不喜歡top and left values in %使用top and left values in % position absolute 。 如果我沒有其他選擇，我會選擇這個。

是否還有其他可能使 div 居中對齊？ 或者我應該在上述兩個選項中使用哪一個？ 如果我必須選擇選項 1，它在我的情況下不起作用。

我不喜歡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 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>

Answer 2

使用 CSS transform可以輕松完成，瀏覽器支持： IE9+

JsFiddle 演示

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

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