Can You Center This Div? My First Game is Live.
Every frontend developer has centered a div. I turned it into a competitive sport nobody can win.
The Game
Can You Center This Div? is a precision challenge where you drag a div element to the exact center of the screen. The success threshold is 0.0001 pixels, roughly 5,000 times smaller than a single pixel on a Retina display.
The global success counter reads 0. It will always read 0.
The HUD
The interface is a full JARVIS-style holographic dashboard. Real-time deviation readouts update at 60fps as you drag. A precision meter tracks your accuracy on a logarithmic scale (INSANE, CLOSE, WARM, MEH, LOST). A radar sweep shows live player attempts from around the world.
When you submit, you get your Earth Scale result. Your 2.4px miss? That translates to 49,873km if the target was Earth. Further than the circumference of the planet.
Each distance tier has 10 handwritten quotes. 2,500+ total, covering everything from "smaller than a virus" to "further than the Moon."
Hidden 418 Easter Egg
Built for the DEV April Fools 2026 Challenge (#418challenge). Find the hidden teapot. It is made of 2,500 particles. It steams. It rotates. You can zoom it.
HTTP 418: I am a teapot. I refuse to center your div.
The Tech
- Next.js 16 + React 19 + TypeScript
- Neon Postgres for the global leaderboard
- Pure CSS doing 90% of the visual heavy lifting
- Pointer Events API for sub-pixel drag tracking
- Canvas API generating share cards (1080x1080, 2x Retina)
The entire game logic lives in a single custom hook. Four API routes handle submissions, leaderboard, stats, and initialization. Anti-cheat rejects deviations below 0.3px with a 418 response.
Open Source
The full source is on GitHub. MIT licensed. My first game. Probably my last.
Play It
Drag the div. Submit your attempt. Share your score. Join the leaderboard of people who almost centered a div but did not.
The success counter will always read 0.
Back to all articles