How to Center a Div Box in the Page using CSS

on February 2, 2017

Post Views: 2,857

Center a Div Box in the Page using CSS

In this example, We will show about How to center a div box in the page using css. The example has been tested and shared in the same post.

CSS Code

.centerDiv {
width: 325px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border:1px solid red;
padding:15px;
}

HTML Code

<html>
<head>
<title>Center Div Sample</title>
<head>
<body>
<div class="centerDiv">
<form>
<table cellpadding="5" cellspacing="2">
<tr>
<td><label>Username</label></td>
<td><input type="text" name="userName" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td><input type="checkbox" /><small>Remember Me</small</td>
<td align="right"><input type="submit" value="Login" /></td>
</tr>
</table>
</form>
</div>
</body>
<html>

Final Example

<html>
<head>
<title>Center Div Sample</title>
<style>
.centerDiv {
width: 325px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border:1px solid red;
padding:15px;
}
</style>
<head>
<body>
<div class="centerDiv">
<form>
<table cellpadding="5" cellspacing="2">
<tr>
<td><label>Username</label></td>
<td><input type="text" name="userName" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td><input type="checkbox" /><small>Remember Me</small</td>
<td align="right"><input type="submit" value="Login" /></td>
</tr>
</table>
</form>
</div>
</body>
<html>