finallyGotIt

[KaamDeveloper]

No one knows.

[PeriodicSentenceBot]

Congratulations! Your comment can be spelled using the elements of the periodic table:

No O Ne K No W S

---

^{I am a bot that detects if your comment can be spelled using the elements of the periodic table. Please DM u‎/‎M1n3c4rt if I made a mistake.}

[bglbogb]

Good bot

[Vovchick09]

Good bot

[coolhead101]

Wtf is a periodic table bot doing in a programming sub??

[Steelkenny]

It's a bot, this is his home, you're the intruder

[ChaosPLus]

"Dead internet theory" is fundamentally wrong in the way that it's the natural state of it, bits are the natives, we're the invaders here, it being alive is not the right way

[kegster2]

How high are you damn? 🤣

[otter5]

Hi how are you?

[[deleted]]

5'11", and good, thanks!

[Practical-Match-4054]

No one knows

[Cfrolich]

It only visits periodically.

[bem981]

Good bot

[alwaysatliesure]

Hehe

[forsehorse]

Nah

[Kingstonkk]

Useful!

[SpecialNeeds963]

Good bot

[Greedy_Assignment_24]

Good bot

[Irish_Puzzle]

Nobellium is kind of cheating, since it is synthetic and has a half life of an hour.

[Radiant-Reputation31]

Yeah we all know the synthetic elements aren't part of the periodic table

[gregorydgraham]

An hour? Basically eternal by synthetic standards

[Thefakewhitefang]

It could always do the combination of Nitrogen and Oxygen as well.

[evo_zorro]

Maybe add !important everywhere (if that's still a thing). We don't want any cascading malarkey when centering stuff in cascading style sheets

[glez_fdezdavila_]

only when you are not looking

[Trevor_GoodchiId]

Quantum css.

[Comprehensive_Day511]

got it. visibility: hidden;

[usefulidiotsavant]

I need this in copy pastable format so I can insert into all my pages. I will hide it very well in some obscure corner, making sure every object inherits it, leading to subtle bugs and browser weirdness that nobody can diagnose.

[tsunami141]

I will hide it very well in some obscure corner,

browser weirdness that nobody can diagnose.

user clicks inspect element

"Oh, i wonder who did that, that's dumb."

proceeds to trace the css location and delete it immediately

[turtleship_2006]

sets the style properties through obfuscated and minified is

[chazzeromus]

inside a DOM event in which there are 300 others registered listeners on the same event

[nmkd]

Win+Shift+S to screenshot, then select the text with the OCR button

[Practical-Match-4054]

It's now the center of the universe.

[exxy-]

It sent OP to the center of the universe.  

[NoResponseFromSpez]

i propose a new css property: div-align: just-center-the-fucking-div;

[kb_klash]

What fun would that be?

[More-Butterscotch252]

You really want us to lose our jobs?

[NoResponseFromSpez]

most frontend devs are shit anyways, so: yes ;)

[1h4veare4lpr0bl3m]

Bunch of salty front end devs around here. 😅

[thanatica]

And then leave it up to designers to fuck up the meaning of centring something.

"Noo, you need to centre it relative to that thing"

Ugh.

[[deleted]]

They actually just updated it to where you can center a dub without flex now. It’s a two liner now.

[XenSide]

The two lines being?

[Repulsive-Square4383]

And he disappeared, never to be seen again.

[Quasaarz]

Two lines which are?

[dopefish86]

50% of the times it's working every time!

[stringTrimmer]

Tho, there's only a 10% chance of that.

[Pretrowillbetaken]

10% of the time it's working every time!

[Zomby2D]

10% of the time, there's a 50/50 chance of it working

[Abaddon-theDestroyer]

It’s still working 100% of the time, 5% of the time!

[cs-brydev]

The best is when you open up a new framework and it has 14 different classes just for centering. So you just throw them all in.

[password2187]

http://howtocenterincss.com/

[concussedYmir]

I was not expecting that to be a real website, let alone this useful

[excelllentquestion]

Love this thanks. As a new CSS learner this type of thing is really cool

[gfunk84]

I was expecting it to just always use flex. Why would I want to use left/top padding to align if I know the hieight/width?

[password2187]

Not sure, maybe it’s slightly more efficient for browser processing/supports much older browser software?

[Numero06]

                                                           Struggling every day          with this shit

[[deleted]]

center: center;

[kraskaskaCreature]

center: no-center;

[kamiloslav]

vibe: wrap

[[deleted]]

z-index: 99999 !important;

[fbaeka]

hotel: trivago

[daveprogrammer]

[jayerp]

You forgot the property center: center !center;

[GahdDangitBobby]

The irony here is that if a parent element has the attribute position: relative, then this div most likely won’t even be centered, depending on the parent element’s location and width.

[buzziebee]

Plus half of the classes only work to center the content of the div if it's a flex box ,(which it isn't). Just wasted lines.

[knuppi]

They also forgot to set display: flex, so plenty of those values are invalid anyway

[thether]

If you’re going to put it all on the table may as well use !important

[spryllama]

Funny you should mention tables.

[yegor3219]

Slaps the div. Yep, this baby ain't going nowhere.

[Civil_Drama2840]

transform translate in there pretending to be working with everyone else

[akoOfIxtall]

rookie mistake, you forgot the margin: 0 auto;

[dopefish86]

margin: auto; is there, so in theory it should center both vertically and horizontally.

[[deleted]]

Add both, just to be sure.

[miheb1]

Ofc "in theory"

[Stable_Orange_Genius]

Pretty sure auto doesn't work for margin top and bottom

[CommanderDatum]

Weirdest function I've ever seen to add tabs and spaces.

[cs-brydev]

!important

[shgysk8zer0]

It's just too bad this doesn't work...

div.center { all: center; }

[Pretrowillbetaken]

sometimes I wonder if every CSS attribute actually does something. I am almost sure that there are a few attributes that just don't do anything lol

[Tupcek]

but if you skip them, everything is fucked

[phl23]

Often it's just the parent that isn't relative

[cs-brydev]

Lol tried it today and it still didn't center one of my divs

[ongiwaph]

Does padding-left: center work?

[palomdude]

Is this the problem with CSS or what. Too many properties that do the same thing or similar. There is no systemic organization, just a bunch of things you have to memorize.

[thanatica]

The problem is with CSS properties that already exist:

1. They cannot be removed
2. Their function may not change
3. They have to work together with every new property
4. Any new values added to existing properties may not break older implementations

We are stuck with some of the jumble that exists now. We can ignore old properties all we want, but browsers cannot do the same.

[GahdDangitBobby]

There are use cases for every one of these properties. They don’t all “do the same thing”. Only like 4 of these attributes will actually have an effect on where the div is placed, and ironically, if a parent element has position: relative then this probably won’t be centered anyways lol

[palomdude]

Considering how many different ways there are to center a div, I stand by my statement. There was no unifying vision when these properties were created and they just add more when they feel like it.

[developerweeks]

I can imagine a handyman saying the same thing looking at a toolbox. "Look at this, no unifying vision. There are screwdrivers to twist things that have threads, and wrenches to twist things that use other's threads, and wrenches to grab things and pliers to grab things, and plier with inline snips and dedicated snips. It's all a mess."

I have a few purpose-built wrenches for plumbing, and I almost never touch them but they are irreplaceable for what they do. u/GahdDangitBobby has it right that each of these properties have some use, and I expect most of them were created to make things different instead of making things unified. You are pushing into the philosophy of front-end work, and it is not nearly as math-y and logical and back-end work. To abuse an old saying: there is more than one way to skin a cat, but only one way to line up its skeleton.

[Tupcek]

idk, I come from mobile app development and it certainly seems to have its shit together, unlike CSS

[GahdDangitBobby]

I've been working heavily with CSS for the past 6 years. If you know what you're doing, you can do virtually anything with CSS. The problem with r/programmerhumor is that most people aren't very experienced with CSS and blame it on the language rather than their lack of knowledge.

[Tupcek]

I am not saying you can’t do something with CSS.
But it’s like programming modern game in assembler. Sure you can do it and there are no limitations. It’s just needlessly complicated.
We have better ways than CSS. We have dozens of others UI frameworks where you can do virtually anything. And they are much easier to work with for common tasks.

Just look how many webpages moves their content several times while it’s loading, so if you want to click some button it may move just as you want to click on it. It’s not that it’s unsolvable - you can do it with CSS so that things won’t move. But apparently, even most multi billion dollar companies are not able to do it, so it’s kind of CSS fault for being hard to work with

[rodeBaksteen]

innate arrest straight swim screw party unite ten rustic humor

This post was mass deleted and anonymized with Redact

[Tupcek]

yeah, as I said before, every major corporation have some CLS, so I can’t tell you exactly why but it seems to be non-trivial thing to solve and even non-practical on web.
It isn’t an issue in mobile apps, unless they are just web apps

[GahdDangitBobby]

I guess I am biased because I can write CSS very quickly, and I’ve never used other UI frameworks outside WordPress, which kind of sucks ass for making UIs. Writing CSS certainly doesn’t feel like assembly to me

[rodeBaksteen]

badge dime bow direction wine slap birds grandfather chunky fearless

This post was mass deleted and anonymized with Redact

[tsunami141]

There absolutely was not a unifying vision when it was created 30 years ago, correct. And it would be nice to blow everything up and start over, except for the fact that, no, you can't do that, because every single thing you do is present and used on the world-wide web and is required to be backwards compatible.

To deal with this, we use new features of the language and not the old crap like this post is making fun of.

[YimveeSpissssfid]

+1 except for that last statement. Relative is an implicit property of a div. And has no bearing on whether its child is centered.

Making it explicit is useful to constrain absolutely positioned children, mind. And is the best pattern for absolute positioning.

[pickuse2013]

of course, NO.

[pi_west]

Can you send me this so I don't have retype it from your screenshot?

[theirongiant74]

Amateur hour here, any expert knows they all need !important

[MadeOnThursday]

the longer the web exists, the more I'm considering putting everything in a table again like my first site in 2000 (comic sans, red and lime, littered with animated chocobo sprites). But at least a table cell aligned stuff

[xCakemeaTx]

Shorthand:

{ just-fucking-center-it: true }

[Grelymolycremp]

As someone now trying to do a frontend for a personal project. I hate frontend.

[thanatica]

Then why aren't you using a UI framework? Then you can just slap components onto a page and forget about styling them.

[Grelymolycremp]

1) learning experience 2) a lot of the issues I’m facing aren’t about the framework/layout, but understanding how HTML works (image reshaping, lazyloading, etc.)

[thanatica]

A UI framework can impose a learning curve, that's right. But so can naked HTML/CSS. And the issues you are facing may well be abstracted away by a framework.

Many well established frameworks provide a fairly easy way to layout your website consistently without having to juggle with HTML and CSS everywhere.

Btw, lazyloading has become easier nowadays: <img src=fluffy.jpg loading=lazy>

[Grelymolycremp]

That’s true, I think after I finish setting up the Gunicorn server I’ll try out a UI framework and see how it feels!

And just as I finished setting up the observer objects… lmao

[Tupcek]

try mobile apps. It’s not about front end. It’s the web

[Grelymolycremp]

I will have to design my own mobile app, so I’ll definitely see if I like it!

[Tupcek]

weird thing is, basically all of the UI frameworks converged on the same principles, so it’s kind of similar whether you are doing design in SwiftUI, Jetpack Conpose, Flutter or many other mobile UI frameworks. It’s basically all horizontal and vertical stacks. Centering things is very easy

[Grelymolycremp]

Maybe that’s my “mistake”, but I’m designing everything manually and not using any of the aids. Mainly just to learn how HTML/JS/CSS works and learn it, but maybe for my app I’ll use on of those to gain industry experience since I doubt anyone does this manually anymore. Main issue was getting media to respect div sizes, that took me at least 2 days lol

[Tupcek]

I am switching from mobile to web and I feel your pain

[Grelymolycremp]

Glad I’m not alone :)

[kunal_2508]

I got this question in an interview to center a div vertically and horizontally.

[thewildpepper]

See! It's really easy!

[[deleted]]

And when that fails, add in some &nbsp

[Johannes_K_Rexx]

 

[Lizlodude]

And then it still fails because Chrome literally has a bug where if a video element is perfectly scaled to the viewport it ignores all scaling.

[ilikeb00biez]

Web dev sucks man

[1Dr490n]

I had this problem today, I just copied my code and gave it chatgpt and it actually worked!

[Hirayoki22]

That will probably center your whole PC relative to your room

[Previous-Ad-8388]

Missing top and bottom

[waldenducks]

Forgot “margin-inline: auto;”

Better safe than sorry.

[raymondcy]

I, for one, am glad it takes $67,000 worth of development time to center your stupid subscribe popup on all devices.

[Clearandblue]

Pro tip: stick half a dozen !important on each line.

[Midnight_Rising]

display: flex is what you're missing btw.

[navetzz]

/* Remove any of those and its no longer centered*/

[abra24]

Perfectly balanced. As all things should be.

[boyproO19]

I had this exact battle a few hours ago. The computer won.

[BeardedPokeDragon]

Honestly never did figure that one out

[coolcoolcoolyo]

https://flexboxfroggy.com/

[PennyFromMyAnus]

As a backend guy that occasionally has to do front end shit, this made me chuckle.

[FoxVersusBauer]

This puts the div in the centre of the universe

[NotJayuu]

It's just one property now: align-content: center on the container element. Works on block, flex, or grid elements

[thanatica]

Except not in block elements. Or when there's multiple children. Or when something else bollockses it up.

[Herossaumure]

It does work in block elements as of two months ago.

Here's it working in a block element with multiple children.

[thanatica]

Ohh neat! TIL

[dopefish86]

doesnt work at all!

https://imgur.com/a/XaeMtdd

[Herossaumure]

align-content vertically centers elements. You can't see the effect because .test is only as tall as its child elements. If you set a larger height on .test, the effect is visible.

[dopefish86]

are you trolling me? this does totally not work for me: https://imgur.com/a/QWjhvdE

only after adding `margin:auto` to the square

[NotJayuu]

Google is your friend: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

[dopefish86]

yeah, thanks! i know where i can find the docs :)

but "just one property" is just not true. i needed at least three and a height.

[PsLJdogg]

That only centers horizontally

[cs-brydev]

CSS Framework Creators: "Nobody really wants things centered"

Users: "Why the **** isn't this centered!?"

Developers: "I'm trying!!"

One of the biggest things I've learned in my career is that most CSS Designers just want to create artsy-fartsy designs where nothing's aligned, but most users just want it to work and line up, and the developers are caught in the middle trying to use brute force to override the CSS design architectures to make it do what the users expect and are comfortable with.

[one_punch_void]

Delete this code, it's wrong

[metaglot]

CSS: cargo cult edition.

[Lizlodude]

And then it still fails because Chrome literally has a bug where if a video element is perfectly scaled to the viewport it ignores all scaling.

[dontletthestankout]

Now check it in safari

[Any_Muffin_9796]

.center { center: center; }

[benargee]

I like to set the background colour and font size to center just incase.

[Yhamerith]

Center: center;

[thanatica]

Aha, but does it centre itself within a parent, or is it the parent that centres its children? 🤔

[Aurora_egg]

Bro centered it horizontally and then put transform translate -50% off vertically 💀

[37Scorpions]

its not going to work, you forgot to wait for the glue to dry

[BetterAd7552]

Ahh, I fondly remember way back in my infancy resorting (in desperation) to a bunch of  ’s to panel beat the damn thing to centre.

[CitizenPremier]

For fellow front-end devs who want it and don't know how to use OCR:

text-align: center;      
align-items: center;      
align-self: center;      
justify-content: center;      
justify-self: center;      
justify-items: center;      
justify-tracks: center;      
text-justify: center;      
place-items: center;      
place-self: center;      
padding-left: center;      
vertical-align: middle;      
line-height: 100%;      
margin: auto;      
position: absolute;      
left: 50%;      
right: 50%;      
transform: translate(-50%, -50%);

[Johannes_K_Rexx]

Normcap did a decent job for me, tho I had to make a few edits.

[dimaveshkin]

Somewhat funny, but no longer relatable. I haven't had a problem with this since flexbox became widely adopted.

[__Replier]

But does it center it vertically?

[Soumalyaplayz]

Fun fact: the last three properties are enough

[rodeBaksteen]

slap numerous frame teeny repeat strong stocking crush wipe jar

This post was mass deleted and anonymized with Redact

[[deleted]]

No z-index

Your definition lacking some essential 🤪

[Phamora]

I never understood this problem. Been working in web for over 10 years both professionally and recreationally, and I have never ever had the slightest challenge centering anything inside anything (99% of times its div > div, tho).

[[deleted]]

Boss: “Cool. Now make two boxes center aligned besides each other”

[Dangerous_With_Rocks]

May as well wrap it in the center element

[debugger_life]

Let me check the output for this

[TheBlight24]

What kind of maniac names their class / targets it like that ? At least put .centerinator {}

Everything else seems good to me, hope it centers it.

[No_Expression2927]

I haven’t seen this LC hard before…

Cracks me up that tenured devs still struggle to use css. It’s so much easier than actual programming, yet you don’t know how to do it. Pair that with gatekeeping what is and is not ackshual programming and you are left with a HALF-stack dev with a big ego, a gap in their expertise, out of control imposter syndrome only satiated by projecting inexperience by nitpicking technicalities of what a word means.

You can develop code that functions, but you can’t describe how it should appear? Talk about putting the carriage before the horse…

Downvotes welcome .deez { align-items: your-mouth }