Setting top, bottom, left and right to 0 contradict each other. And why use an obscure ::after pseudo class?

I hope I can address your questions and that I didn't misunderstand anything.

First of all, never set a value to "initial." Internet Explorer won't understand it. But, if you did set it to initial, other browsers would understand it as being the same thing as setting it to "auto" (because "auto" is the initial value for top, right, bottom, and left properties). So it wouldn't do anything. When you give those properties a value of "0," you're saying "top side, right side, bottom side, and left side, DON'T pull or push this element at all." But now the browser won't know what your intentions are. So, in a way, you're right. You could say that you're confusing the browser. But a better way to think of it is you're giving the element no position. So you need to give it a position. Giving it a margin of "auto" gives it an equal value all around. The browser says "Oh! Now I know where to put it!" The result naturally puts it in the center of the container.

As for using the :after pseudo class, the method you're describing is basically just another way of doing it. But sometimes the best solution for inserting an image is using CSS. For example, I recently created a simple slideshow for a client's home page, but it was looking kind of bland. So, I put a circular gradient in the corner to sort of mimic a glare effect, and now it looks great. If I used an img tag, I would have had to set a div with the gradient on top of the img element. I would have needed two elements for each image. That's more lines of code in the HTML, CSS, and JS. So instead, using CSS, I have each div grab the pic and apply the gradient. Below is the code I wrote for one of the pictures in the slide show. As you can see, I put the gradient and image in the same class and the same declaration. It's highly efficient.

        .pic1_layer {
            background: -webkit-radial-gradient(circle at bottom right, #fff, transparent 30%), #fff url('../images/1.jpg') no-repeat center;
            background: radial-gradient(circle at bottom right, #fff, transparent 30%), #fff url('../images/1.jpg') no-repeat center;
        }

Hope this helps!