Home > CSS > How to center fixed-positioned element

How to center fixed-positioned element

This trick I’ve just discovered, is for some of you who have done fixed positioning but couldn’t make it work with the margin:0 auto; fix. It couldn’t, and will never work. So here’s how:

#fixedPositionedElement {
position:fixed;
left:50%;
width:250px;
margin:0 -125px;
}

So as you can see, the left margin is set to half of the element’s width. With this you will have a fixed-positioned and centered element.

I used this once for a notification pop-up that emulates the stylish WordPress’ Lightbox plugin.

Lightbox

Advertisements
Categories: CSS Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: