Question

请帮助，我希望这个表格在垂直和水平方向都是死点，所以它看起来像http://www.creattor.com/files/14743/5515/futuristic-login-form-screenshots-1.jpg所以它是动态中心，希望你能帮助我。

  <html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
body{
background-color:#33383E;
}

.login input{
width:150px;;
background-color:#1D1E22;
border: 0px solid;
padding:5px;
color:#33383E;


}
.login{
width:320px;
padding:20px;
background-color:#1D1E22;
border-radius:10px;
margin-top:33.3%

}
#user{
    margin-bottom:-10px;
}
#pass{
    margin-top:-10px;
    margin-bottom:0px;
}
#login{
display: inline;
margin: 0;
}
hr{
border:2px solid;

background-color: #33383E;
}

#circle {
    width: 100px;
    height: 100px;
    background: #33383E;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    float:right;
}
#mini-circle{
    width: 70px;
    height: 70px;
    background: #1D1E22;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    margin-right:auto;
    margin-left:auto;
    margin-top:15px;
}
.ring{
margin-top:-125px;
margin-left: 200px;
}
</style>
<body>

<div class="container-fluid">
<div class="row">

<div class="col-md-4"></div>

<div class="col-md-3">

<div class="form-group">

<div class="login">
    <form id="login" method="post">
    <input type="text" id="user" name="user" placeholder="Username" /><br />
    <hr />
    <input type="password" id="pass" name="pass" placeholder="Password" />
    </form>

</div>


<div class="ring"><div id="circle"><div id="mini-circle"></div></div></div>
</div>
</div>

<div class="col-md-4"></div>

</div>
</div>

</body>
</html>

Answer 1

Codepen：http://codepen.io/anon/pen/rVjpJb

.form

的CSS

display: inline-block

包含元素的CSS（例如div，body）

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

此外，请确保文档的高度为100％

PS-抱歉，我没有使用所有标记

Answer 2

你也可以用CSS表来实现它。这是小提琴：http://jsfiddle.net/jf4nvk1n/，用于未来派登录表单

这里是快速解释的小提琴http://jsfiddle.net/1dcevxhm/

HTML：

<div class="table">
    <div class="table-cell">
        <p>Test</p>
    </div>
</div>

CSS：

html, body, .table, .table-cell{
    height: 100%;
    width: 100%;
}
.table{
    display: table;
}
.table-cell{
    display: table-cell;
    vertical-align: middle
}
p{
    margin-right: auto;
    margin-left: auto;
    width: 20%;
    text-align: center;
}

中心登录表单bootstrap

2 个答案: