Saturday, August 13, 2011

Horizontal and Vertical Aligned div using CSS

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered Div</title>
<style type="text/css">
width: 400px; 
height: 200px; 
top: 50%; 
left: 50%; 

<div id="center">
Screen Centered Div


No comments:

Post a Comment