Center login form bootstrap

Question

please help, i want this form dead center both vertical and horizontal so it looks like this http://www.creattor.com/files/14743/5515/futuristic-login-form-screenshots-1.jpg and so it is dynamical center hope you can help me.

  <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>

http://stackoverflow.com/questions/20853066/how-to-center-form-in-bootstrap-3 ... — João Vilaça, May 30 '15 at 14:05

score 2 · Accepted Answer · answered May 30 '15 at 14:35

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

CSS for .form

display: inline-block

CSS for containing element (eg. div, body)

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

Also, Make sure that the document has 100% height

PS- Sorry I didn't use all the markup

score 0 · Answer 2 · answered May 30 '15 at 15:07

You can achieve it with CSS tables too. Here's the fiddle: http://jsfiddle.net/jf4nvk1n/ for the futuristic-login-form

And here's the fiddle for the fast explanation 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;
}

Center login form bootstrap

2 Answers2