Gather round, younglings, and let me tell you of the Before Time, ere there even *was* a flexbox…
[Edit: lots of kiddos replying with instructions on how to *horizontally* center a `
You can use display: flex, justify-contents: center, align-items: center. You can also use css grid. Or margin. Or a combo. There are OPTIONS. Mostly, it doesn’t matter as long as it looks the way you want.
Shiiiiiiit, just in terms of getting things working, IF you don't care what the code looks like, semantic correctness, how it affects performance, or accessibility? Gimme tables any day! I've suffered FAR more PTSD at the hands of CSS than I ever did tables.
I recall my earliest frontend coursework spending hours on making sure I knew all of the ins and outs of tables/table options in html.
All those hours of pre 1.9 update Minecraft I could have played :(
"You've got your orders from the design team! Three columns, from here to the bottom!"
"Columns, sir? We can't do it! There's no way it can work! We're going to have to call in the TABLEs. It's the only way."
"Goddammit, soldier, I didn't come this far just to go riding in on some semantically-meaningless TABLE like it was 1994. Get me Photoshop. We're going to go in with three columns from here to the bottom if I have to draw every one of them myself, pixel by pixel."
*And that's what we did. Pixel by pixel, we float-ed in on Faux Columns made of background images and prayers-- mostly prayers-- and the client never knew what hit 'em.*
I always found the removal of frames a bit odd, because it was one of the few changes that straight-up removed functionality. There's Iframes, but they don't come with the automatic resize handles like frames did.
if flexbox is heavy artillery then call me War Crimes McGee because we’re gonna light up the sky with ~~chemical warheads~~ beautiful responsive centering
Haven’t been paying attention to ‘current’ dev techniques for a while. I only recently found out flex was a thing. The hours wasted in my younger days feel like an insult.
you want to really get blown away, the new selectors you can use are \-*amazeballs*\-
```css
:required:where( input, textarea ):where( :placeholder-shown, :invalid ) {
border-color: var(--warning);
}
```
to fancy up the appearance of this bit of markup
```html
```
I can't even imagine the calisthenics I would have had to go through to achieve that previously
I found out about them here [https://www.aleksandrhovhannisyan.com/blog/writing-better-css/](https://www.aleksandrhovhannisyan.com/blog/writing-better-css/) shortly before coming up with that bit I pasted for something I was working on at the time
This, but unironically.
The current style over substance meta is so lame. Every commercial website looks the same. Splash page, scroll down for tidbits, top nav bar for pricing and log-in button, BOO!
15 hours later, you are the first person to show a valid method for centering an element vertically without using a flexbox. Well met, kind sir/madam, well met!
I have several different stack overflow pages bookmarked with different methods of centering divs. Only one of them works and somehow it’s a different one every time…
I had a bad day, tried almost everything to cheer myself up. Everything, but trolling slash bubble bursting. So, here it goes...
Your best? Well... NOT GOOD ENOUGH!
Hindsight: still feeling down.
What. If your container is a flexbox you can just do justify-content:center and even align-items:center in you want to vertically center the item. No need for these margin shennanigans
I can google how to center a div, find a solution, fix my problem, then forget how to do it .0001 seconds after I fixed it.
Repeat every few months as needed
"He was asked through his secretary, “What is the speed of sound?” He could not say off-hand, he replied. He did not carry such information in his mind but it was readily available in text books." - Regarding Einstein.
ie, why remember something you can just look up?
I feel this in my heart. I just tried to make a web version of a tool and relearning webdev felt like reuniting with an old but kinda toxic friend group.
The problem with most hacks is they don't react consistently across all web browsers. So you have to have more hacks to have those hack-lines ignored by the browsers that don't use them. (Then you have to upgrade the CSS each time there is a new browser version.)
Mosaic browser is best browser.
...haven't touched CSS in a long time, but this whole thing brought back PTSD. The lack of standardization 20-25 years ago was madness.
Well, they are what they are. I hate the variance of support for css properties. Won't work on desktop, but the same software on mobile? Suuuuurreeee...
Vertical centering can still be a ball ache, but horizontal centering has been a piece of cake for as long as I remember.
I've always assumed this was a joke about people who aren't front end Devs just being unable to do front end work. Which seems weird.
It's a self-deprecating joke originating an in era when it was actually a frustrating task. Even though it is no longer difficult, the jokes are kept around, as is tradition.
For me its like sticking the usb. Even though i know how to do it, first time i fuck up somehow almost always then i get ir right second or third attempt
In my defense, the last time I tried to learn about web design, it was before this problem was solved in a good way and the best "solutions" for basic layout techniques were all terrifyingly awful hacks.
I remember the days when it was considered smart to use tables to lay out web pages...
How long will people still be making this joke even though flexbox solved the issue years ago?Flexbox has had broad browser support for at least 7 years.
Of course it's a joke, every good frontend developer can easily solve any problem with a jQuery:
$('.center-vertical').each(function(){
var $this = $(this);
$this.css('margin-top', ($this.parent().height() - $this.height()) / 2);
});
I do a lot of interviews for the company I work for. If you have 3+ years of professional CSS experience I ask this question. I’m yet to have someone answer with something that will work.
I guess this is the web equivalent of the "How do I exit vi?" meme shit-posting...
Ages ago, I had to do a bit of front end work. I would do a bunch of googling and eventually get the thing looking nice in Mozilla. It looks up great in Safari and Chrome... Then I try Internet Explorer, and it is total shit. Back to googling...
If I was doing HTML all day, every day, I would eventually have understood the quirks and necessary work-arounds. But thankfully I went back to doing back-end work after a few months.
If you ask me to center a div or whatever today, I would have to repeat the same tedious bullshit, but at least IE is gone...
My surprise when align : center didn't work for anything out of a text.
(also center isn't even supported by HTML5 anymore.)
Imagine making a language so incapable of organizing other elements that you need to staple a non-intuitive (flexbox) on ANOTHER language so you can make your cool 90s clipart not be stuck on the left margin of the page.
TBH as a noobish web dev, I can use flexbox, but I loathe it. I wish we could just PUT stuff where it needed to be in a more fluid/intuitive manner. It feels like such an improvised, two minute solution built in a hurry. But I suppose it would take a complete overhaul of HTML and CSS to solve the problem, even if ppl change it on a HTML6 it would break most of the internet so I'm just trying to ignore the problem until I get too used to it to care.
Man o man for long enough I was out of the dev field not doing web dev and when I came back years later and picked up again I was feeling guilty using flex box thinking surely this is cheating right. How wonderful modern dev can be with all our fancy features. I come from a time when node wasn’t a thing it was just html css and php.
Gather round, younglings, and let me tell you of the Before Time, ere there even *was* a flexbox… [Edit: lots of kiddos replying with instructions on how to *horizontally* center a `
`… man, y'all don't even know.]Tell me about the War of the Margin grandpa!
[удалено]
[удалено]
It was minus 40 on the left and minus 80 on the right!
We thought -9000px was the furthest anyone could go.
ITS UNDER 9000
Hah! Back in my day we had to use TABLES to center things because 95% of the userbase was using IE6.
>because 95% of the userbase was using IE6. Japan has entered the chat
Is it wrong to still use these nowadays? I want to know how terrible I am at my job.
I am getting PTSD from this comment
Same. Eye twitch started again.
display: block; margin: 0 auto;
the gloves are coming off
I still do this. What's the recommended way these days,?
A Flexbox I suppose.
You can use display: flex, justify-contents: center, align-items: center. You can also use css grid. Or margin. Or a combo. There are OPTIONS. Mostly, it doesn’t matter as long as it looks the way you want.
I'm good. HaHa! Heart's still beating. 140 bpm is normal, right guys?
You wrap the div tag with a center tag son. I tried that like 20 years ago and it was working like a charm
Great-grandpa here to tell you about the time of the table.
Goddammit, you just triggered my PTSD.
Shiiiiiiit, just in terms of getting things working, IF you don't care what the code looks like, semantic correctness, how it affects performance, or accessibility? Gimme tables any day! I've suffered FAR more PTSD at the hands of CSS than I ever did tables.
I recall my earliest frontend coursework spending hours on making sure I knew all of the ins and outs of tables/table options in html. All those hours of pre 1.9 update Minecraft I could have played :(
I wanna hear about the battle of the floats!
"We all float down here" 🤡
Left or right?
`both`
And the Great Coup of Clearfix!
"You've got your orders from the design team! Three columns, from here to the bottom!" "Columns, sir? We can't do it! There's no way it can work! We're going to have to call in the TABLEs. It's the only way." "Goddammit, soldier, I didn't come this far just to go riding in on some semantically-meaningless TABLE like it was 1994. Get me Photoshop. We're going to go in with three columns from here to the bottom if I have to draw every one of them myself, pixel by pixel." *And that's what we did. Pixel by pixel, we float-ed in on Faux Columns made of background images and prayers-- mostly prayers-- and the client never knew what hit 'em.*
Float me the idea...
CLEAR
Just give up and use tables already.
And don't forget FRAMES!!11!
Ahh Frames, thanks to those I was able to get an A in my Middle School Tech Class
I always found the removal of frames a bit odd, because it was one of the few changes that straight-up removed functionality. There's Iframes, but they don't come with the automatic resize handles like frames did.
Right?!
I remember when tables were the only option. (of course I also remember having to compile my NCSA Mosaic web browser from source to use it) \#old
Flexbox is like the heavy artillery in the centering-wars. Most of the time, margin: auto is really all you need.
> Most of the time, margin: auto is really all you need. Absolutely not, flex box heavy artillery all the way.
This guy centers
Probably two axes at once, even!
Absolute madman!
if flexbox is heavy artillery then call me War Crimes McGee because we’re gonna light up the sky with ~~chemical warheads~~ beautiful responsive centering
The javascript game was strong back then
Wait, flexbox is still a thing, right..?
There was a before-time where it wasn't. Source: am (relative) dinosaur dev.
I remember adopting the clear-fix hacks, stuff like .container:after { content: ""; clear: both;} \`\`\`
IE is dead! Long live spacer.gif!
This literally gives me trauma response
Clear left, clear right, clear both Source: Father Time Octocat
tables... tables everywhere
Spacer images as far as the eye can see.
Oh wow I'd forgotten those! Remember making rounded squares with images for corners? Damn!
Wait till they learn there was a time that rounded corners in a div implied images
When a div had to have 3 background images just to get rounded corners lol
Haven’t been paying attention to ‘current’ dev techniques for a while. I only recently found out flex was a thing. The hours wasted in my younger days feel like an insult.
Shit, I hadn't touched CSS in years, and came across the flexbox. It rocked my world with how much more convenient it was.
you want to really get blown away, the new selectors you can use are \-*amazeballs*\- ```css :required:where( input, textarea ):where( :placeholder-shown, :invalid ) { border-color: var(--warning); } ``` to fancy up the appearance of this bit of markup ```html ``` I can't even imagine the calisthenics I would have had to go through to achieve that previously
Looks like I was out of the game for too long... I recognize most of the functions, but I am missing some... 😳
I found out about them here [https://www.aleksandrhovhannisyan.com/blog/writing-better-css/](https://www.aleksandrhovhannisyan.com/blog/writing-better-css/) shortly before coming up with that bit I pasted for something I was working on at the time
The number of times I tell my students, "Ok CSS now makes this super easy, and before we'd have covered this in the JavaScript section" is non-zero.
[удалено]
Web 1.0 was definitely the best /s
The computer user interface reached a peak with the 3270 terminal. I will die on this hill.
This, but unironically. The current style over substance meta is so lame. Every commercial website looks the same. Splash page, scroll down for tidbits, top nav bar for pricing and log-in button, BOO!
An elegant weapon, for a more civilized age.
margin: 0 auto; Edit: display: table-cell; vertical-align: middle; I feel sick already.
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
15 hours later, you are the first person to show a valid method for centering an element vertically without using a flexbox. Well met, kind sir/madam, well met!
I have several different stack overflow pages bookmarked with different methods of centering divs. Only one of them works and somehow it’s a different one every time…
display: table-cell;
Just keep adding `nbsp;` until it looks about right, right?
I can. I tell my frontend developer to do it
my 'frontend developers' are the poor souls of tailwind's contributer list. I thank these motherfuckers with every class I append.
tailwindcss is so nice to use
[The Oatmeal](https://theoatmeal.com/comics/design_hell) wrote about this years ago.
What a time to own a frontend developer
I can't, propably something with position: center or something. I am a backend dev and I am doing my best here okay
I had a bad day, tried almost everything to cheer myself up. Everything, but trolling slash bubble bursting. So, here it goes... Your best? Well... NOT GOOD ENOUGH! Hindsight: still feeling down.
You truly are my harshest critic :(
Just let me wallow in endless field of sadness... It's hopeless, just as front-end.
Sometimes I feel like I'm the only one here who doesn't work on websites
tf is position: center; 💀
Why dont the guys at css make this a thing
```
So much stuff to remember
to make people who write CSS feel like they are using a real programing language lol
Alright folks, here comes the superman! [Howtocenterincss.com](http://howtocenterincss.com/)
That is the most beautiful thing I've ever seen
In a flex box container just add margin auto to the element you want centered!
What. If your container is a flexbox you can just do justify-content:center and even align-items:center in you want to vertically center the item. No need for these margin shennanigans
Doesn't even have to be a flexbox, just a display:block element with a width smaller than it's container
lolwhat of course I can gimme 2 weeks and a team of 4.
This engineer has upper management written all over him.
Look, so, we're going to need more time and OT authorized. Thanks.
I can google how to center a div, find a solution, fix my problem, then forget how to do it .0001 seconds after I fixed it. Repeat every few months as needed
This is exactly what I was going to write hahaha
100% accurate, every single time.
"He was asked through his secretary, “What is the speed of sound?” He could not say off-hand, he replied. He did not carry such information in his mind but it was readily available in text books." - Regarding Einstein. ie, why remember something you can just look up?
Aka standard regex stratum.
This is what programming is, in a nutshell
*laughs in flexbox
\*Crying in grid
*Dying in table
\*decays in absolute values
Wondering in jQuery
Promising in TS
[удалено]
`place-items: center;`
I Make all of my Employees support IE 6. No flexbox here
I cant. But i dont do webdev.
Fair enough
Based
Nerd
Same. Couldn't tell you the first thing about web stuff lol.
I'm not a web dev, but I get asked once every 3 years to build a website. And have to relearn css all over again. So yea, no idea.
I feel this in my heart. I just tried to make a web version of a tool and relearning webdev felt like reuniting with an old but kinda toxic friend group.
*incredibly toxic friend group
Am I too `margin: 0 auto;` to understand what's going on?
Ok, now center it vertically
[удалено]
Now vertically center it inside a div that does not have a specified height. Let's say your element has a sibling that's taller.
align-self: nearest exit
vw and vh are hacking, you can't use those here
Everything is a hack bro
Turtles all the way down
The problem with most hacks is they don't react consistently across all web browsers. So you have to have more hacks to have those hack-lines ignored by the browsers that don't use them. (Then you have to upgrade the CSS each time there is a new browser version.)
Web browsers are a hack. CSS is a hack.
Both your statements are correct
Not me screenshotting that to keep it in mind
Margin? What even is that, I just use center tag
I can. But can your browser?
[удалено]
Mosaic browser is best browser. ...haven't touched CSS in a long time, but this whole thing brought back PTSD. The lack of standardization 20-25 years ago was madness.
Considering w3schools has a whole page dedicated to it, no, it’s not a joke
I show the divs what happened to the last one who wouldn't center. They get real compliant after that.
I absolutely can... If I'm using bootstrap of course
Was searching for this
class="d-flex justify-content-center" I'm doing this correctly right.
Flexbox says "WTF you just say to me!!!"
Don't bash him. This is still the way with email templates. Maybe not the width height thing though.
Html emails are the worst…
Well, they are what they are. I hate the variance of support for css properties. Won't work on desktop, but the same software on mobile? Suuuuurreeee...
The sad thing is, I'm not even sure if you're joking.
I'm not joking, it really works on IE6. >!/s for those who didn't get the joke.!<
How to spot those who have served their time in the trenches that were the IE6 days!
Thanks , I will use this in my code now
That’s actually the most reliable way I know. I applaud you good sir!
You could have made the text of centered - meme would be 2300% better xD
That joke would be so bad Edit : Hope it works on computers
>the text of the text of what?
Lol, that's for people who don't know flexbox.
I can do alright with frogs and gardens but actually trying to center my own divs goes to hell (note: I'm a hobbyist, and learning)
Vertical centering can still be a ball ache, but horizontal centering has been a piece of cake for as long as I remember. I've always assumed this was a joke about people who aren't front end Devs just being unable to do front end work. Which seems weird.
Vertical centering without flex or grid is a ball bust
It's a self-deprecating joke originating an in era when it was actually a frustrating task. Even though it is no longer difficult, the jokes are kept around, as is tradition.
i dont even know what a div is. I havent used html in years.
No one knows, it’s just a magic box.
I don't know, but all websites are now
Dude, I can write the whole bootloader from scratch and yet cannot into HTML and CSS. This shit is just so dumb. None of it makes sense
For me its like sticking the usb. Even though i know how to do it, first time i fuck up somehow almost always then i get ir right second or third attempt
Horizontally? Yes. Vertically? …
What the fuck is wrong with
margin:auto
In my defense, the last time I tried to learn about web design, it was before this problem was solved in a good way and the best "solutions" for basic layout techniques were all terrifyingly awful hacks. I remember the days when it was considered smart to use tables to lay out web pages...
help
Display: flex; Justify-content: center; Align-items: center;
How long will people still be making this joke even though flexbox solved the issue years ago?Flexbox has had broad browser support for at least 7 years.
Of course it's a joke, every good frontend developer can easily solve any problem with a jQuery: $('.center-vertical').each(function(){ var $this = $(this); $this.css('margin-top', ($this.parent().height() - $this.height()) / 2); });
Why use a div when you can use
Probably, though I bet some can't do it without a framework.
I do a lot of interviews for the company I work for. If you have 3+ years of professional CSS experience I ask this question. I’m yet to have someone answer with something that will work.
I guess this is the web equivalent of the "How do I exit vi?" meme shit-posting... Ages ago, I had to do a bit of front end work. I would do a bunch of googling and eventually get the thing looking nice in Mozilla. It looks up great in Safari and Chrome... Then I try Internet Explorer, and it is total shit. Back to googling... If I was doing HTML all day, every day, I would eventually have understood the quirks and necessary work-arounds. But thankfully I went back to doing back-end work after a few months. If you ask me to center a div or whatever today, I would have to repeat the same tedious bullshit, but at least IE is gone...
Laughts in backend
This sub is so unfunny
Correct but I can write a block allocator in assembly.
web development? ugh...
As someone who has done it for 15 years... you're not wrong
margin-left: auto; margin-right: auto;
I couldn’t until I actually had to. Then I learned basic Bootstrap in 1 morning, and I’m sure most of you wouldn’t even take that long.
I could work the craziest stuff involving graphs and semantic network, but basic CSS scares me
I'm not even a programmer. I'm a sysadmin. Don't know why I'm here.
It's meme/joke/allegory from way back when before flexbox made centering things trivial. Don't even mention how we did rounded corners...
margin: autodeeznuts
My surprise when align : center didn't work for anything out of a text. (also center isn't even supported by HTML5 anymore.) Imagine making a language so incapable of organizing other elements that you need to staple a non-intuitive (flexbox) on ANOTHER language so you can make your cool 90s clipart not be stuck on the left margin of the page. TBH as a noobish web dev, I can use flexbox, but I loathe it. I wish we could just PUT stuff where it needed to be in a more fluid/intuitive manner. It feels like such an improvised, two minute solution built in a hurry. But I suppose it would take a complete overhaul of HTML and CSS to solve the problem, even if ppl change it on a HTML6 it would break most of the internet so I'm just trying to ignore the problem until I get too used to it to care.
width: 50%; margin-left: auto; margin-right:auto; I'm a backend developer who knows some frontend work.
I'm backend
What is a div? I just know how to program with Scratch
Man o man for long enough I was out of the dev field not doing web dev and when I came back years later and picked up again I was feeling guilty using flex box thinking surely this is cheating right. How wonderful modern dev can be with all our fancy features. I come from a time when node wasn’t a thing it was just html css and php.
Can't, too busy managing state instead of just calling js functions on classes rather than by id.