How to place a box in the middle of the browser window?

Sometime developers are really afraid to do a silly thing, like how to center a div or how to middle align a custom pop-up or how to middle align an image. Even they looking for HTML expert help or spent lots of time on browsing to find out the solution. But can you imagine that a single class can do all the above things.

Suppose you want to use a message box in the middle of the browser window. Then see how you will do it with a single class for all monitor resolution.

CSS:

.popup { width:300px; height:350px; background:#CCC; 
border:#999 1px solid; position:absolute; left:50%; top:50%; 
margin-left:-150px; margin-top:-175px; z-ndex:1200 }

HTML:

<div class=”popup”>

Your message goes here

</div>

It’s ready to use!

How it will work?
If you check the pop-up class properties very carefully then you will see there are ten properties.

1. Width: Using for pop-up window.
2. Height: Using for pop-up height
3. Background: for pop-up background color
4. Border: For pop-up box color
5. Position: To make an absolute position of the pop-up box.
6. Left: To position the pop-box in the half of the browser window from left side.
7. Top: To position the pop-box in the half of the browser window from top side.
8. Margin-Left: To make the pop-up box horizontal align. Please note that the minus value always will be half of the pop-up width.
9. Margin-Top: To make the pop-up box vertical align. Please note that the minus value always will be half of the pop-up height.
10. Z-Index: To make pop-up window, front of another element.

I hope, now you also understand that how to middle aligns an image inside a div.

To Middle align an image inside a DIV:
CSS:

  
.product { position:relative; width:200px; height:200px; 
border:#ccc 1px solid}  
.product img { position:absolute; left:50%; top:50%; 
margin-left:-80px; margin-top:-80px;}

HTML:

<div class="product">
<img src="images/product.jpg" width="160" height="160" 
alt="Product" />
</div>

I hope you enjoy it!