div内部布局输入元素，间距相等，不使用表格元素

Question

如何垂直布局输入元素，以便元素的空格不相同，而不使用 table 元素。当视口高度发生变化时，布局应调整大小。

以下是带有以下代码的小提琴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;
}