Centering a div horizontally and vertically
If you did want a div to be actually centered on the (screen using CSS, then you would need a little arithmetic too.
Make your div (e.g. 'Container') for your content - image, text, whatever, and give it the height and width that you want.
Example:
#Container {
height: 250px;
width: 400px;
}
• To center the div, give it a top margin of minus half its height ( -125px), and its left margin of minus half its width (-200px.).
• Give it a position value of 'absolute'.
• Give placement values of 50% for top, and 50% for left.
#Container {
height: 250px;
width: 400px;
margin-top: -125px;
margin-left: -200px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
This will centre the div on your page.
This is it, with background, border and color styles also added. Resize your window to test it.