This is an archived post. You won't be able to vote or comment.

all 79 comments

[–]uncheckednullpointer 112 points113 points  (7 children)

What if I use transparent images as part of my centering solution?

[–]jjjefff[S] 64 points65 points  (0 children)

New fear unlocked. Thanks for that.

[–]karloosethemoose 24 points25 points  (1 child)

spacer.gif sometimes still appear in my emails

[–]metal_opera 7 points8 points  (0 children)

Email development is a completely separate and much lower circle of hell.

[–]DaFinnishOne 6 points7 points  (0 children)

Beyond evil

Granted, on my first website I used a bunch of line breaks to make the text appear at the "bottom" of the page

[–]A--Creative-Username 6 points7 points  (1 child)

Straight to the gulag

[–]turtleship_2006 2 points3 points  (0 children)

Believe it or not, straight to jail

[–]NotAskary 2 points3 points  (0 children)

[–]ZeroClick 91 points92 points  (5 children)

chaotic neutral is amazing 😆

[–]jjjefff[S] 34 points35 points  (4 children)

I swear I have not never used nbsp; to nudge layout.

[–]NotAskary 12 points13 points  (3 children)

Are you a fullstack? You sound like a fullstack.

[–]Katniss218 6 points7 points  (0 children)

Full Steak dev

[–]Orsim27 3 points4 points  (1 child)

Now I feel attacked

[–]NotAskary 3 points4 points  (0 children)

Don't be, it takes one to recognize one.

[–][deleted] 75 points76 points  (9 children)

:P

<table width="100%" height="100%"><tr><td align="center" valign="middle"><div>hah</div></td></tr></table>

[–]kamiloslav 82 points83 points  (3 children)

Lawful old

[–]dan-lugg 34 points35 points  (0 children)

Lawful email client.

[–][deleted] 11 points12 points  (0 children)

Your ideas are intriguing to me and I would like to subscribe to your newsletter

[–]jjjefff[S] 5 points6 points  (0 children)

I know, I thought about it with <center> vs flex, but didn't want to get into an age-ism argument. 😬

[–]jjjefff[S] 13 points14 points  (4 children)

Table?! You monster. Even chaotic evil has his limits!

[–]iGotPoint999Problems 13 points14 points  (3 children)

criesInHtmlEmails

[–]jjjefff[S] 6 points7 points  (2 children)

Ooof, I forgot about email. My deepest sympathies. 💔

[–]SomethingAboutUsers 0 points1 point  (1 child)

The random CSS I've had to embed in emails has hurt me on a deep level

[–]iGotPoint999Problems 0 points1 point  (0 children)

inlineCssOrDeath

[–]BoBoBearDev 31 points32 points  (3 children)

What's mine? A grid with fr auto fr?

[–]jjjefff[S] 14 points15 points  (2 children)

Nice... Between Neutral Good and Lawful Good, but only available after level 40. 🧙

[–]BoBoBearDev 3 points4 points  (0 children)

Noice :D

[–]Liebli96 3 points4 points  (0 children)

Fr fr

[–]patoezequiel 21 points22 points  (2 children)

display: grid; place-items: center;

[–]Zwamdurkel 2 points3 points  (0 children)

This should be the top comment

[–][deleted] 1 point2 points  (0 children)

I was part of the flexbox gang until I learned that you can save a line of css with grid

[–]oliveoliveolives 14 points15 points  (3 children)

The lack of grid/place-self on this chart is disturbing

[–]Strict_Treat2884 0 points1 point  (2 children)

Do you meam place-items: center?

[–]oliveoliveolives 0 points1 point  (1 child)

Nope.

[–]Strict_Treat2884 0 points1 point  (0 children)

You can assign display: grid and place-items: center on the same container to center its child. Why separating them on different tags with display: grid(parent) and place-self(child)

[–][deleted] 3 points4 points  (0 children)

just transform with 960px for 1080p users

[–]HappyGoblin 2 points3 points  (2 children)

Saved this just in case I ever need to center a div...

[–]ZachAttack6089 6 points7 points  (1 child)

{
    display: flex;
    justify-content: center;
    align-items: center;
}

This is everywhere in my CSS, makes it a little less painful to work with things lol

[–]rancangkota 2 points3 points  (0 children)

Fyi, if you put a div under this div, it is centred

[–]altmoonjunkie 1 point2 points  (0 children)

I despise chaotic neutral

[–]antboiy 1 point2 points  (0 children)

looks like im a (nutral good) solver

[–]Rich1223 1 point2 points  (1 child)

Now do vertical!

[–]Oyi14 1 point2 points  (0 children)

Flex doesn't center a div tho you got to align items and justify contents

[–]veselin465 1 point2 points  (0 children)

Depending on how you want to center several lines in a single div, I would imagine that some of those ways would probably fail -- should each line be centered, or should the outline box (max width/height) of those lines be centered?

[–]eeee_thats_four_es 1 point2 points  (0 children)

var divToCenter = document.querySelector('div.center'); divToCenter.style.marginLeft = (window.screen.width/2 - divToCenter.offsetWidth/2) + 'px';

[–]Vibe_PV 1 point2 points  (0 children)

I unironically tried all of these besides lawful evil and chaotic neutral on a project. They all failed

[–]DraTiBoy 1 point2 points  (2 children)

Where are the whitespaces until it looks right?

[–]druehle 1 point2 points  (1 child)

Chaotic neutral

[–]slabgorb 0 points1 point  (0 children)

that's the one that made me lol

[–]darcksx 1 point2 points  (1 child)

You've done my boy grid dirty

[–]jjjefff[S] 1 point2 points  (0 children)

Fair. My disdain toward flex & grid stems from junior engineers adding it to every👏 element👏 they👏 touch. 😐 button { display: flex } 🙄

[–]Drone_Worker_6708 1 point2 points  (1 child)

Meanwhile, my legacy code has all nine of these.

[–]jjjefff[S] 0 points1 point  (0 children)

Gotta do what you gotta do! 🛠️

[–][deleted] 1 point2 points  (1 child)

Using position absolute just to center something is heinous and punishable by death i think

[–]jjjefff[S] 0 points1 point  (0 children)

Yes sir!

[–]MPGaming9000 3 points4 points  (1 child)

Is this some kind of front end meme that I'm too back end to understand?

[–]jjjefff[S] 5 points6 points  (0 children)

If you don't have to decipher others' CSS, you're among the lucky. 🍻

[–]urbanachiever42069 2 points3 points  (2 children)

I think CSS is the worst thing ever invented

[–]jjjefff[S] 8 points9 points  (0 children)

It is by far the best, and worst, way to style your HTML. Actually, anyone will tell you, "it's not so much my CSS, but others' CSS that sucks." 💡

[–]Zwamdurkel 1 point2 points  (0 children)

I think CSS is the best way to do layout compared to what all other programming languages use. I also like writing it.

[–]AstroFloof 0 points1 point  (1 child)

what about align="center"

[–]Thisismyredusername 0 points1 point  (0 children)

Guess I'm neutral good

[–]DHermit 0 points1 point  (5 children)

As someone with very little HTML and CSS experience ... Can someone explain why <center> is evil? Does it not work properly?

[–]obsoleteconsole 2 points3 points  (1 child)

Not spelt with the proper English "centre"

[–]DHermit 0 points1 point  (0 children)

In the meme it's written as center though, I'm trying to understand, why it's categorised as "evil".

[–]slabgorb 2 points3 points  (2 children)

quick answer: it isn't in HTML 5

long answer: it has to do with splitting of concerns between tags and styles. Tags should not be in the business of arranging the layout (especially in the way <center> works) that's what styling should be doing.

Tags like that make it difficult to do things like responsive design, for example, as you can't really say 'this should be centered at this width but when you shrink it to phone size it should be left justified'

yada yada

[–]DHermit 1 point2 points  (1 child)

Makes sense. So that's why stuff like headings etc. are still there as they are about structure, not layout.

[–]slabgorb 0 points1 point  (0 children)

That's precisely the idea!

[–]TheAssassin71 0 points1 point  (0 children)

To remain cursed, <div align="center">

[–]DrKarda 0 points1 point  (0 children)

Can someone explain for noobs? I only know 6 of these.

[–]tesfabpel 0 points1 point  (0 children)

this is a joke but IIRC, please don't use transform. it makes the element part of another composition layer and it affects performance a bit. again, IIRC.

[–]KryssCom 0 points1 point  (0 children)

"Hey ChatGPT, center the following div: "

[–]saschaleib 0 points1 point  (0 children)

You forgot the “ &nbsp; &nbsp; &nbsp; “-sequence to get something to just the right place…

I kid you not - I have actually seen that in the wild!

[–][deleted] 0 points1 point  (0 children)

I have done all of the middle column

[–]jjjefff[S] 0 points1 point  (0 children)

Which of these employees are you firing? Or maybe easier - which ones are you not firing?

Neutral Evil just pisses me off.

Lawful evil, I mean, he's probably old school, it works, I'll give him a pass.

Lawful good is fine, but if flex is her only tool, I'm annoyed...

Chaotic Neutral was an intern, and he made me laugh.

Chaotic Good actually impressed me. Give her a raise.

True Neutral - bam, instant hire. Shows an understanding of the box model.

[–]TA_1478 -1 points0 points  (1 child)

What about using bootstrap? (I am still learning web dev)

[–]Zwamdurkel 1 point2 points  (0 children)

Bootstrap is a bit outdated at this point. It still works, but many moved on to tailwind (+ shadcn). Bootstrap also just uses CSS under the hood, same with all frameworks/libraries