when i use top:50% and left:50%
the box is not directly in center. of course when the box is very small, it appears to be centered. but when box is a bit big, it looks as if it's not centered.
how can i resolve this ?
left correspond to the top-left corner of your box. What you're trying to do is have them correspond to the center. So if you set
margin-left to negative of one-half the height and width respectively, you'll get a centered box.
Example for a 300x200 box:
width: 300px; height: 200px; top: 50%; left: 50%; margin-left: -150px; margin-top: -100px;