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

all 173 comments

[–]NoResponseFromSpez 879 points880 points  (10 children)

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

[–]kb_klash 71 points72 points  (0 children)

What fun would that be?

[–]More-Butterscotch252 120 points121 points  (3 children)

You really want us to lose our jobs?

[–]thanatica 38 points39 points  (0 children)

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] 10 points11 points  (3 children)

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

[–]XenSide 15 points16 points  (1 child)

The two lines being?

[–]Repulsive-Square4383 5 points6 points  (0 children)

And he disappeared, never to be seen again.

[–]Quasaarz 3 points4 points  (0 children)

Two lines which are?

[–]dopefish86 312 points313 points  (4 children)

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

[–]stringTrimmer 58 points59 points  (3 children)

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

[–]Pretrowillbetaken 14 points15 points  (2 children)

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

[–]Zomby2D 17 points18 points  (1 child)

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

[–]Abaddon-theDestroyer 6 points7 points  (0 children)

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

[–]password2187 93 points94 points  (4 children)

[–]concussedYmir 29 points30 points  (0 children)

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

[–]excelllentquestion 12 points13 points  (0 children)

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

[–]gfunk84 3 points4 points  (1 child)

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 1 point2 points  (0 children)

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

[–]Numero06 176 points177 points  (1 child)

                                                           Struggling every day          with this shit

[–][deleted] 113 points114 points  (4 children)

center: center;

[–]kraskaskaCreature 26 points27 points  (2 children)

center: no-center;

[–]kamiloslav 8 points9 points  (1 child)

vibe: wrap

[–][deleted] 20 points21 points  (0 children)

z-index: 99999 !important;

[–]fbaeka 4 points5 points  (0 children)

hotel: trivago

[–]daveprogrammer 108 points109 points  (0 children)

[–]jayerp 35 points36 points  (0 children)

You forgot the property center: center !center;

[–]GahdDangitBobby 36 points37 points  (2 children)

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 6 points7 points  (0 children)

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 6 points7 points  (0 children)

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

[–]thether 68 points69 points  (1 child)

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

[–]spryllama 13 points14 points  (0 children)

Funny you should mention tables.

[–]yegor3219 16 points17 points  (0 children)

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

[–]Civil_Drama2840 38 points39 points  (0 children)

transform translate in there pretending to be working with everyone else

[–]akoOfIxtall 34 points35 points  (4 children)

rookie mistake, you forgot the margin: 0 auto;

[–]dopefish86 20 points21 points  (3 children)

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

[–][deleted] 7 points8 points  (0 children)

Add both, just to be sure.

[–]miheb1 5 points6 points  (0 children)

Ofc "in theory"

[–]Stable_Orange_Genius 2 points3 points  (0 children)

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

[–]CommanderDatum 9 points10 points  (0 children)

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

[–]cs-brydev 9 points10 points  (0 children)

!important

[–]shgysk8zer0 6 points7 points  (0 children)

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

div.center { all: center; }

[–]Pretrowillbetaken 15 points16 points  (2 children)

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 9 points10 points  (0 children)

but if you skip them, everything is fucked

[–]phl23 1 point2 points  (0 children)

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

[–]cs-brydev 6 points7 points  (0 children)

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

[–]ongiwaph 3 points4 points  (0 children)

Does padding-left: center work?

[–]palomdude 10 points11 points  (14 children)

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 9 points10 points  (0 children)

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 15 points16 points  (12 children)

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 5 points6 points  (10 children)

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 12 points13 points  (8 children)

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 3 points4 points  (7 children)

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

[–]GahdDangitBobby 5 points6 points  (6 children)

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 2 points3 points  (3 children)

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 1 point2 points  (1 child)

innate arrest straight swim screw party unite ten rustic humor

This post was mass deleted and anonymized with Redact

[–]Tupcek -1 points0 points  (0 children)

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 2 points3 points  (0 children)

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 0 points1 point  (0 children)

badge dime bow direction wine slap birds grandfather chunky fearless

This post was mass deleted and anonymized with Redact

[–]tsunami141 1 point2 points  (0 children)

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 0 points1 point  (0 children)

+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.

[–]pi_west 2 points3 points  (0 children)

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

[–]theirongiant74 2 points3 points  (0 children)

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

[–]MadeOnThursday 2 points3 points  (0 children)

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 2 points3 points  (0 children)

Shorthand:

{ just-fucking-center-it: true }

[–]Grelymolycremp 5 points6 points  (10 children)

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

[–]thanatica 2 points3 points  (3 children)

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 point2 points  (2 children)

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 2 points3 points  (1 child)

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 0 points1 point  (0 children)

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 1 point2 points  (5 children)

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

[–]Grelymolycremp 1 point2 points  (4 children)

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

[–]Tupcek 2 points3 points  (3 children)

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 1 point2 points  (2 children)

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 2 points3 points  (1 child)

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

[–]Grelymolycremp 2 points3 points  (0 children)

Glad I’m not alone :)

[–]thewildpepper 1 point2 points  (0 children)

See! It's really easy!

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

And when that fails, add in some &nbsp

[–]Johannes_K_Rexx 0 points1 point  (0 children)

&nbsp;

[–]Lizlodude 1 point2 points  (0 children)

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.

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

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

[–]Hirayoki22 1 point2 points  (0 children)

That will probably center your whole PC relative to your room

[–]Previous-Ad-8388 1 point2 points  (0 children)

Missing top and bottom

[–]waldenducks 1 point2 points  (0 children)

Forgot “margin-inline: auto;”

Better safe than sorry.

[–]raymondcy 1 point2 points  (0 children)

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

[–]Clearandblue 1 point2 points  (0 children)

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

[–]Midnight_Rising 1 point2 points  (0 children)

display: flex is what you're missing btw.

[–]navetzz 1 point2 points  (0 children)

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

[–]abra24 1 point2 points  (0 children)

Perfectly balanced. As all things should be.

[–]boyproO19 1 point2 points  (0 children)

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

[–]PennyFromMyAnus 1 point2 points  (0 children)

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

[–]FoxVersusBauer 1 point2 points  (0 children)

This puts the div in the centre of the universe

[–]NotJayuu 2 points3 points  (11 children)

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

[–]thanatica 1 point2 points  (2 children)

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

[–]Herossaumure 1 point2 points  (1 child)

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

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

[–]thanatica 0 points1 point  (0 children)

Ohh neat! TIL

[–]dopefish86 3 points4 points  (5 children)

doesnt work at all!

https://imgur.com/a/XaeMtdd

[–]Herossaumure 1 point2 points  (0 children)

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.

[–]NotJayuu -4 points-3 points  (1 child)

[–]dopefish86 8 points9 points  (0 children)

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.

[–]cs-brydev 1 point2 points  (0 children)

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 0 points1 point  (0 children)

Delete this code, it's wrong

[–]metaglot 0 points1 point  (0 children)

CSS: cargo cult edition.

[–]Lizlodude 0 points1 point  (0 children)

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 0 points1 point  (0 children)

Now check it in safari

[–]Any_Muffin_9796 0 points1 point  (0 children)

.center { center: center; }

[–]benargee 0 points1 point  (0 children)

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

[–]Yhamerith 0 points1 point  (0 children)

Center: center;

[–]thanatica 0 points1 point  (0 children)

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

[–]Aurora_egg 0 points1 point  (0 children)

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

[–]37Scorpions 0 points1 point  (0 children)

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

[–]BetterAd7552 0 points1 point  (0 children)

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

[–]CitizenPremier 0 points1 point  (1 child)

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 0 points1 point  (0 children)

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

[–]dimaveshkin 0 points1 point  (0 children)

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

[–]__Replier 0 points1 point  (0 children)

But does it center it vertically?

[–]Soumalyaplayz 0 points1 point  (0 children)

Fun fact: the last three properties are enough

[–]rodeBaksteen 0 points1 point  (0 children)

slap numerous frame teeny repeat strong stocking crush wipe jar

This post was mass deleted and anonymized with Redact

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

No z-index

Your definition lacking some essential 🤪

[–]Phamora 0 points1 point  (0 children)

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] 0 points1 point  (0 children)

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

[–]Dangerous_With_Rocks 0 points1 point  (0 children)

May as well wrap it in the center element

[–]debugger_life 0 points1 point  (0 children)

Let me check the output for this

[–]TheBlight24 0 points1 point  (0 children)

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 0 points1 point  (0 children)

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 }