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
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