Horizontal and Vertical Aligned div using CSS

Saturday, August 13, 2011

Horizontal and Vertical Centered Element is very use full for any layout.
Here we can see how to create a Centered div using CSS

Create Div with 400px in Width, and 200px in Height for your quick observation I used to just in 100s, you can adjust your div size based on this assumption

To Create a Aboslute Centered Div:

Position: Asbolute,
Top and Left : 50%
Margin-Left: -(50%) of width
Margin-Top- (50%) of Height



HTML & CSS Code for Horizontal and Vertical Centered Div.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered Div</title>
<style type="text/css">
<!--
#center{
position:absolute; 
width: 400px; 
height: 200px; 
top: 50%; 
left: 50%; 
margin-left:-200px; 
margin-top:-100px; 
text-align:center;
background-color:#CCC;
}
-->
</style></head>
<body>

<div id="center">
Screen Centered Div
</div>

</body>
</html>

No comments:

Post a Comment