中心登錄表單引導

請幫助，我希望這個表格死點既垂直和水平，所以它看起來像這樣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>

來源

2015-05-30 hejsan

HTTP：/ /stackoverflow.com/questions/20853066/how-to-center-form-in-bootstrap-3 ... –

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

的CSS .FORM

display: inline-block

CSS包含元素（如DIV，身體）

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

同時，確保文檔具有100％的高度

PS-對不起，我沒有使用所有的標記

來源

2015-05-30 14:35:23

完美！ ps愛codepen – user1807271

你也可以用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; 
}

來源

2015-05-30 15:07:51 speedDeveloper

中心登錄表單引導

回答

相關問題