Attribute position:relative doesn't work properly in firefox?

[thichtomo 0]

I have a piece of CSS as following (in order to align a div vertically center)

#center {	position:relative;	height:200px;	width:500px;	top:50%;	margin:-100px auto 0px auto;	border-radius:10px;	border:1px solid white;}

In Chrome, it works well, as in the first illustration:

 

 

but in Firefox, it's displayed as following:

 

 

Please, explain to me the reason of the issue. You can check this issue in your browser by link: http://thichtomo.com/example/

[newseed 26]

Although I do not know exactly why browsers do not render it the same, the correct way to achieve this make the following changes in bold:

 

#center { border: 1px solid #FFFFFF; border-radius: 10px; height: 200px; left: 50%; margin: -100px 0 0 -250px; position: absolute; top: 50%; width: 500px;}

[thichtomo 0]

Although I do not know exactly why browsers do not render it the same, the correct way to achieve this make the following changes in bold:

 

#center { border: 1px solid #FFFFFF; border-radius: 10px; height: 200px; left: 50%; margin: -100px 0 0 -250px; position: absolute; top: 50%; width: 500px;}

If we use: position:absolute, it works well even in firefox. In my opinion, if we put margin-left and margin-right as auto, browsers will automatically set divs horizontally center.