I’m trying to write a custom 404 error page.
Here is my pen.
It has quite a number of issues. I am trying to center the box vertically and horizontally. I added a bottom and left value of 50% in the centerer element. Here I tried playing around with different variables, increasing and decreasing the bottom and left values. I also tried flipping the position from relative to absolute. I also tried commenting out the transform property. I can’t get it to center. The only thing that works in this element as I intended is the center text-align.
I found a short and concise guide by Chris Coyier titled, “Perfect Full Page Background Image“. It explains a number of different ways to fix a background image properly. I settled with what Chris calls, the “CSS-Only Technique #2” . I am not sure if I succeeded in implementing it properly because my misaligned box is throwing me way off.
