How to Vertically and Horizontally Center a Div in CSS

Vertically and Horizontally Center a Div

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

<div class="login-wrapper">
<div class="login-box">
<div class="inner"></div>
</div>
</div>

CSS

.login-wrapper{display:table; width:100%; height: 450px; margin:0; background-color:#fafafa;}
.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>
.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;}

Final Result

Leave a Reply

Be the First to Comment!

Notify of
avatar