html - 在不使用表格元素的情况下，以等间距垂直布局 div 内的输入元素

Question

如何在不使用 table 元素的情况下垂直布局 input 元素，使元素的黑白空间相等。当视口(viewport)高度改变时，布局应调整大小。

这是 fiddle http://jsfiddle.net/agfw7731/使用以下代码。

<div id="login_container">
    <input id="signup_username" type="text" placeholder="Username">
    <input id="signup_password" type="password" placeholder="Password">
    <input id="signup_retype_password" type="password" placeholder="ReType Password">
</div>

Answer 1

你可以尝试这样的事情http://jsfiddle.net/agfw7731/5/

*{
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html, body{
    height: 100%;
}
#login_container{
    width: 100%;        
    max-width: 300px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
}
#login_container input{
    width: 100%;
    margin-bottom: 10px;
}