请帮助,我希望这个表格在垂直和水平方向都是死点,所以它看起来像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>
答案 0 :(得分:2)
Codepen:http://codepen.io/anon/pen/rVjpJb
.form
的CSSdisplay: inline-block
包含元素的CSS(例如div,body)
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
此外,请确保文档的高度为100%
PS-抱歉,我没有使用所有标记
答案 1 :(得分:0)
你也可以用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;
}