How To Make Div Horizontal Center and Vertical Middle

How To Make Div Horizontal Center and Vertical Middle

Many web developers do not know how to make a div vertically middle and, horizontal centre. In some way they manage to use margin left and margin top, but when it is opened on the big screen, it does not come in vertically middle and horizontal centre.

In this Article We Will learn how to Make Your Div Horizontal Center and Vertical Middle.

HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="login_container"></div>

</body>
</html>

CSS

body
{
	margin:0px;
	padding:0px;
	font-family:Verdana, Geneva, sans-serif;
}


.login_container
{
	width:350px;
	height:450px;
	background:#f60;
	margin:auto;
	left:0;
	top:0;
	bottom:0;
	right:0;
	position:absolute;
}

Download Zip File 

Leave a Reply

Your email address will not be published. Required fields are marked *