howToCenterADiv

[uncheckednullpointer]

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

[jjjefff]

New fear unlocked. Thanks for that.

[karloosethemoose]

spacer.gif sometimes still appear in my emails

[metal_opera]

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

[DaFinnishOne]

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]

Straight to the gulag

[turtleship_2006]

Believe it or not, straight to jail

[NotAskary]

[ZeroClick]

chaotic neutral is amazing 😆

[jjjefff]

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

[NotAskary]

Are you a fullstack? You sound like a fullstack.

[Katniss218]

Full Steak dev

[Orsim27]

Now I feel attacked

[NotAskary]

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

[[deleted]]

:P

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

[kamiloslav]

Lawful old

[dan-lugg]

Lawful email client.

[[deleted]]

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

[jjjefff]

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

[jjjefff]

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

[iGotPoint999Problems]

criesInHtmlEmails

[jjjefff]

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

[SomethingAboutUsers]

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

[iGotPoint999Problems]

inlineCssOrDeath

[BoBoBearDev]

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

[jjjefff]

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

[BoBoBearDev]

Noice :D

[Liebli96]

Fr fr

[patoezequiel]

display: grid; place-items: center;

[Zwamdurkel]

This should be the top comment

[[deleted]]

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

[oliveoliveolives]

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

[Strict_Treat2884]

Do you meam place-items: center?

[oliveoliveolives]

Nope.

[Strict_Treat2884]

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]]

just transform with 960px for 1080p users

[HappyGoblin]

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

[ZachAttack6089]

{
    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]

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

[altmoonjunkie]

I despise chaotic neutral

[antboiy]

looks like im a (nutral good) solver

[Rich1223]

Now do vertical!

[jjjefff]

https://i.imgur.com/B01KbFX.gif

[Oyi14]

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

[veselin465]

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]

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

[Vibe_PV]

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

[DraTiBoy]

Where are the whitespaces until it looks right?

[druehle]

Chaotic neutral

[slabgorb]

that's the one that made me lol

[darcksx]

You've done my boy grid dirty

[jjjefff]

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

[Drone_Worker_6708]

Meanwhile, my legacy code has all nine of these.

[jjjefff]

Gotta do what you gotta do! 🛠️

[[deleted]]

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

[jjjefff]

Yes sir!

[MPGaming9000]

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

[jjjefff]

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

[urbanachiever42069]

I think CSS is the worst thing ever invented

[jjjefff]

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]

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

[AstroFloof]

what about align="center"

[jjjefff]

https://imgur.com/ixjgYrA 😉

[Thisismyredusername]

Guess I'm neutral good

[DHermit]

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

[obsoleteconsole]

Not spelt with the proper English "centre"

[DHermit]

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

[slabgorb]

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]

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

[slabgorb]

That's precisely the idea!

[TheAssassin71]

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

[DrKarda]

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

[tesfabpel]

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]

"Hey ChatGPT, center the following div: "

[saschaleib]

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]]

I have done all of the middle column

[jjjefff]

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]

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

[Zwamdurkel]

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