Sunday, September 29

CSS - Center div when its position fixed.

I had to center a div of list items in the center of the page. However the catch was that the div was set to position : fixed. It is kind of tricky but you can do this with CSS.

1) Provide a width to the main parent div. Preferably in percentage so that works fine on responsive layouts.
2) Provide a negative half of the width value of div to the margin-left property.
3) Let the left property also have a value of half of the div.

I've created a simple POC here, with help of various resources found on the internet.
http://cdpn.io/hDndA

Be the first one to Comment!!!

Post a Comment