Jump to content

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


thichtomo
 Share

Recommended Posts

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:

 

chrome_div_vertical_align.png

 

but in Firefox, it's displayed as following:

 

firefox_div_vertical_align.png

 

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

Link to comment
Share on other sites

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;}

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...