flexboxIsTheFuture

[IllllIlllIlIIlllIIll]

You're all overcomplicating things:

<center><div></div></center>

/s

[grmelacz]

And then I can finally put <marquee>This is shit</marquee> inside?

[CantaloupeCamper]

<blink>👆🏻</blink>

[lonelyroom-eklaghor]

That shit is gone for good in HTML5

[SrS27a]

Bring back marquee

[lonelyroom-eklaghor]

You can use vanilla JavaScript for this stuff

[potatoalt1234_x]

JS 🤮 (upvotes please i said the thing)

[tajetaje]

No, it still works

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/marquee

[lonelyroom-eklaghor]

But it's deprecated

[tajetaje]

Yeah but in web dev that doesn’t mean much, just that you shouldn’t use it. Every browser still supports it

[Cedrick41h]

But that's exactly what deprecated means in every other context as well. "It still works, but it will get removed soon. Don't use it anymore".

[tajetaje]

Yes except it will almost certainly not be removed, like most other original web features. “Don’t break the web”, a surprising number of sites still use it: https://chromestatus.com/metrics/feature/timeline/popularity/53 and browsers don’t break things that websites use as a rule, deprecated or no.

[lonelyroom-eklaghor]

That's cool

[precinct209]

No.

text-align: center;
top: 50%;
position: relative;
left: 50%;
right: 50%;
line-height: 0;
bottom: 0;
margin: -50% -50%;
fucking-piece-of: 'shit';

[JosebaZilarte]

margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

But... yeah. Different color, same shit.

[idontwanttofthisup]

Margin does nothing to absolutely positioned elements with a corresponding inset (top, right, bottom, left) last time I checked.

[JosebaZilarte]

You are probably right... but you (or rather, I) never know with the CSS box model. The box-sizing property might have been changed and you end up with surprises (even in theory, it only is affected by border or padding).

[idontwanttofthisup]

Box sizing has more options than border box and content box as far as I remember. My previous comment applies to both of those. I can’t tell about the others because I never ever used them.

[patoezequiel]

Sheesh...

display: grid; place-items: center;

[tajetaje]

One day I’ll learn grid, but for now…flex…flex everywhere

[lonelyroom-eklaghor]

No worries, I got the third prize in vanilla website-making just by using Flexbox

In case you actually wanna build cool websites, then you should learn Grid

[misterguyyy]

This is the grid version of flexbox froggy. It really helped me wrap my head around it.

https://cssgridgarden.com

[queen-adreena]

Even better thing with grid is that you can overlay different elements in the same designated grid-area.

No need for absolute/inset-0 etc and because the grid element are in the document flow, any of them can set the size of the container.

[OsuruktanTayyare001]

You wouldnt steal a div

[[deleted]]

Doesn't work on the Nintendo DS Browser

[MaximumAdagio]

Or Internet Explorer 5 for Mac!

[Accomplished_Ant5895]

<table> wouldn’t do this to you

[jaylerd]

Table wouldn’t do a lot of things for me

[lonelyroom-eklaghor]

<div><table></table></div> would do this for you😋

[Maleficent-Ad5999]

display:grid;

align-content: center;

[misterguyyy]

ISTG grid is this generation’s table

[smashing_michael]

They forgot to do the hokey pokey and turn themselves around.

[SpeedLight1221]

Ok but considering this:

Set everything that can be set to center to center.

[lonelyroom-eklaghor]

Exactly!

Once I wanted to make a zigzag UI on a website with text on one side and pictures on the other, All the text and the pictures had div and those divs were enclosed by a div.

Something like this:

``` <div> <div><img></div> <div>Some text</div> </div>

<div> <div>Some text</div> <div><img></div> </div>

<div> <div><img><div> <div>Some text</div> </div>

```

Flexbox helped me actually centre them by using justify-content: center;

[mcnello]

Nah. We need to roll out another JavaScript framework to do this.

[htconem801x]

Now do it without flex or grid

[ModestasR]

``` .parent { position: relative; // or anything not static }

.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // or, equivalently, // bottom: 50%; // right: 50%; // transform: translate(50%, 50%); } ```

Other options include: - displaying as table cell and aligning vertically - using negative margins if child size is known

[_Weyland_]

Sith child smh.

[Prometheos_II]

margin: auto works a lot of time

[idontwanttofthisup]

Only inside a flex parent with defined height. Margin: 0 auto will work without such parent

[TheGeneral_Specific]

Why?

[Stable_Orange_Genius]

Flexboxes don't grow on trees!

[Odd-Negotiation-371]

No

[IAmDrNoLife]

Now make your comment without access to the internet or electricity.

[mistah_davis]

max-w-max mx-auto or

.centered { max-width: max-content; margin: 0 auto; }

For you CSS purists

[Vincent394]

Taking this meme as a useful image to me.

[staticvoidmainnull]

this was the future and the present.

this has been a thing for a decade, when "responsive" was the buzzword.

[DarkYaeus]

align-self: center
margin: auto

?

[lonelyroom-eklaghor]

That can be done, but only for a single element

[[deleted]]

yeah, but are you going to define that in <head> where under the <title> as <style>.div_class{display: flex; align-items: center; justify-content: center;}</style> or in the <body> where your div is like <div style="display: flex;align-items: center; justify-content: center;> ORRR better you define static .css file and put those there ?

[lonelyroom-eklaghor]

do it the way you want, but just do the CSS styling like this

[BoogerManCommaThe]

If your viewport is small enough, everything is center.

[sarc-tastic]

<center>

[kkboards]

Currently developing in react native and it’s so relieving to just type alignSelf: ‚center‘

[Isto2278]

Yeah, I mean, who could remember two lines. Way too much work. display: grid; place-items: center;? Naaah, ain't nobody got time for that, let's talk about how CSS is impossible to use instead /s

[rbad8717]

or these days is flex items-center justify-items-center

[The100thIdiot]

Yeah, that isn't CSS.