Skip to content
DevMeme
4430 of 7590
Frontend Post #4852 · source on Telegram

How experts center divs: the eternal one-word answer, flexbox every time

Description

Black-and-white, six-panel Sarah Andersen style comic. The left column shows a wide-eyed developer with a messy bun asking in panel 1, “How do you center divs?” and later proclaiming in panel 3, “It must be an innate gift… A gift from God…” and in panel 5, “I’ll never understand how some people are so talented… A mystery…”. The right column shows a calm, desk-seated developer; in panels 2, 4, and 6 a speech bubble above them simply says “flexbox”. The joke highlights the perennial frontend struggle of vertically and horizontally centering elements in CSS, contrasting perceived wizardry with the straightforward modern solution of using the flexbox layout module. Visually minimalist with thick outlines, no color, and exaggerated facial expressions for comedic effect, the strip satirizes how seasoned web engineers reduce mystifying layout problems to a single CSS technique

Comments

21
Anonymous ★ Top Pick I spent years teaching Paxos to get five datacenters to eventually agree, only to learn flexbox makes every browser agree on “center” in one line
  1. Anonymous ★ Top Pick

    I spent years teaching Paxos to get five datacenters to eventually agree, only to learn flexbox makes every browser agree on “center” in one line

  2. Anonymous

    After 15 years in the industry, I've seen engineers build distributed systems spanning continents, but ask them to vertically center a div without flexbox and watch them contemplate a career change to farming

  3. Anonymous

    The real mystery isn't how talented flexbox users are - it's how we survived the dark ages of `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);` and convinced ourselves that was a reasonable solution. Flexbox didn't just solve centering; it exposed decades of collective Stockholm syndrome with CSS layout hacks

  4. Anonymous

    Senior move: whisper “display:flex; justify-content:center; align-items:center;” and pray the container has a height - and that nobody says “IE11”

  5. Anonymous

    After two decades of float-clears, table-cells, and translate(-50%, -50%), the new hire says “display:flex; justify-content:center; align-items:center” - the CSS equivalent of “just use a hashmap.”

  6. Anonymous

    Flexbox didn't democratize centering - it just exposed how we'd all been ritualistically sacrificing goats to the positioning gods for years

  7. @slnt_opp 3y

    Wow, cool meme, who's the author?

    1. dev_meme 3y

      I don’t know, maybe @RiedleroD knows?

      1. @RiedleroD 3y

        no idea

    2. @callofvoid0 3y

      look at the sign

      1. @RiedleroD 3y

        what sign?

      2. @slnt_opp 3y

        😱😱😱

    3. @dsrvd 3y

      flexbox

    4. @realVitShadyTV 3y

      Meme cells so centered with same margins… Maybe author used flexbos

      1. @slnt_opp 3y

        flexboss😎

  8. @erizpl 3y

    Imagine there were days when you had no other choice than margin: auto...

    1. @RiedleroD 3y

      there's people in every language who think the old standards were better in every one, except CSS lol

  9. @erizpl 3y

    Didn't say it was better. It sucked and I thank God for flexbox that it's no longer required to swear on layouts.

    1. @RiedleroD 3y

      aye, I know

  10. Deleted Account 3y

    )

  11. Deleted Account 3y

    .

Use J and K for navigation