Everyday a designer or developer is found in trouble to perform a div or any html element to vertically and horizontally center a div inside div because you can easily center div horizontally to set element width and define margin left and right value auto or can set parent div text align to center.
But if you try to center it vertically you find difficult to fix it.So In this tutorial you will see about how to center div with using only css
HTML
CSS
.login-wrapper{display:table; width:100%; height: 450px; margin:0; background-color:#fafafa;}
.login-wrapper .login-box{display:table-cell; vertical-align:middle;}
.login-wrapper .login-box{display:table-cell; vertical-align:middle;}
Complete Code
<div class="login-wrapper">
<div class="login-box">
<div class="inner"><ul><li><input type="text" class="form-control" placeholder="Enter Name"></li><li><input type="email" class="form-control" placeholder="Enter Email"></li><li><input type="password" class="form-control" placeholder="Enter Password"></li><li><input type="button" class="btn btn-primary" value="Submit"></li></ul></div>
</div>
</div>
<div class="login-box">
<div class="inner"><ul><li><input type="text" class="form-control" placeholder="Enter Name"></li><li><input type="email" class="form-control" placeholder="Enter Email"></li><li><input type="password" class="form-control" placeholder="Enter Password"></li><li><input type="button" class="btn btn-primary" value="Submit"></li></ul></div>
</div>
</div>
.login-wrapper{display:table; width:100%; height:450px; margin:0; background-color:#fafafa;}
.login-wrapper .login-box{display:table-cell; vertical-align:middle;}
.login-wrapper .login-box h2{margin:0 0 20px;}
.login-wrapper .login-box .inner{background-color:#fff; padding:20px; max-width:400px; margin:0 auto;}
.login-wrapper .login-box .inner ul{margin:0; padding:0;}
.login-wrapper .login-box .inner ul li{margin-bottom:10px;}
.login-wrapper .login-box{display:table-cell; vertical-align:middle;}
.login-wrapper .login-box h2{margin:0 0 20px;}
.login-wrapper .login-box .inner{background-color:#fff; padding:20px; max-width:400px; margin:0 auto;}
.login-wrapper .login-box .inner ul{margin:0; padding:0;}
.login-wrapper .login-box .inner ul li{margin-bottom:10px;}
Leave a Reply
Be the First to Comment!