Last Updated: February 25, 2016
·
10.9K
· srph

Center a fixed div without width

I thought that this could have been basically done with something as simple as:

.ng-notification-flash-container {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    width: 1px;
}

Surprisingly, I didn't work as expected. But, then, it worked by adding left: 0; right: 0;

.ng-notification-flash-container {
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1px;
}

By the way, this has also been asked on Stack Overflow.

In a broader matter, anything in this article doesn't (and probably won't) make any sense at all.

If you have taken a peek on the Stack Overflow question, this is how I was trying to solve my problem with the a fixed element: elements behind it are simply inaccessible. It did the trick, however I found it hard to center the element with a 1px width. I didn't know why I could not.

Until an answer was posted along with a conversation regarding improvements and results.

Elements behind the fixed element would become accessible by setting the pointer-events property to `none. It was simple as that.

Take a look on this protip as it directly tackles the problem and its simple solution.

1 Response
Add your response

margin: 10px auto;
position: fixed;
width: 500px;
display: block;
this will center the element

over 1 year ago ·