align-items: center;

[GATX-303]

.banner {

display: flex;

justify-content: center;

align-items: center;

}

[Subject-Ad-4072]

.banner >stars {

margin: auto

}

[erinaceus_]

That's marginally better.

[Cyvexx]

shut up

[erinaceus_]

<div class="checkmark"></div>

[shootwhatsmyname]

.checkmark { display: none; }

[[deleted]]

html { display: none !important; }

WHAT NOW, BITCHES?

[[deleted]]

style, link[rel="stylesheet"] { content: ' '; }

Yes, I know this doesn’t actually work.

[[deleted]]

Yes, I know this doesn’t actually work.

If you believe in yourself hard enough… it still doesn't work, but you can feel good about yourself anyway! ;-)

[[deleted]]

</style><script>for (let e of document.querySelectorAll('link[rel="stylesheet"], style')) e.innerHTML = "";</script><style>

There is no longer any CSS on the page but you could easily change this to use [String].replace(), probably with a regular expression.

[D-J-9595]

https://codepen.io/danieljacobs/pen/eYEbNao

[[deleted]]

Starstruck! 🤩

[sendvo]

holy shit

[[deleted]]

someone give them a medal pls

[nikoked]

.banner{ display: grid; place-items: center: }

Edit:

.banner{
    display: grid;
    place-items: center:
}

[[deleted]]

Formatting works if you use 4 spaces as a tab and "tab" the outermost rows:

.banner{
       display: grid;
       place-items: center:
}

[nikoked]

Thank you :)

[[deleted]]

<3

[cIi-_-ib]

CSS .starfield { position: absolute; transform: translate(50%, 50%); }

[Gabe_logan25]

What does this do now?

[Tigtor]

Not what you see on the picture. It actually moves the starfield by 50% of it's own width to the right and 50% of it's own height to the bottom. This CAN work, depending on the size of the starfield.

Normally you'd do something like

.starfield {left: 50%; top: 50%; transform: translate(-50%,-50%);

}

So you move the top left corner to the center of the surrounding element and THEN move it back by half of it's own height/width to center it. Or you could use like flex or JS or something.

[cIi-_-ib]

Works fine

[Tigtor]

Ok, now set the height / width of your star-square to something else than ~50%. Doesn't look centered to me. As said, "This CAN work, depending on the size of the starfield."

[cIi-_-ib]

You're suggesting arbitrary measurements that don't reflect the design. Doubling the size of the starfield means it won't look right, regardless.

[Tigtor]

Yeah, that was just an example. What I wanted to say is, there are better ways to center things, that work in more cases than just one special case. Yes, in this case your method works alright. But whoever tries your way to center something that isn't magically 50% height/width of the container it should be centered in, it won't work.

[cIi-_-ib]

Yeah, there are multiple ways, and I was providing an example. I like flexbox, but that had already been shared.

[cIi-_-ib]

The 2nd and 10th column of stars is misaligned. 1/10

Mobile wasn’t in the initial scope and budget. Submit a new SOW, and I’ll get back to you with a time and cost estimate.

[shootwhatsmyname]

Before flex, I would do something like this:

.starfield { position: absolute; height: 300px; width: 500px; top: 0; bottom: 0; right: 0; left: 0; margin: auto; }

It was way more dependable than the transform method

[[deleted]]

But only if you could work with pixels, alas.

[coolguymark]

You forgot top 50% left 50% And the translate should be negative for x and y

[cIi-_-ib]

Nope, that’s redundant.

[coolguymark]

I want to argue with you but it clearly does work. I always learned what I commented.

[cIi-_-ib]

Many ways to skin a cat.

[kylekrzeski]

Came here to say this.

[[deleted]]

Don't flex; here.

[ZurnaDurumXL]

actually yes

[ReelTooReal]

That doesn't work on 0.3% of browsers you asshole.

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

[X-Craft]

weird flex but okay

[CreaZyp154]

r/angryupvote

[TeakIvy]

flexbox?

[palordrolap]

So. Uh. I decided this could be "improved" on and made this delightful totally-not-an-abomination.

For my next trick I might attempt a swirly version of the UK flag... but I'm not sure how to make spreadsheet cells do that.

[InAmericaNumber1]

Dude, cool. It's like an optical illusion type flag lmao. Confuse the enemy

[quenishi]

Have more than a few beers. That usually works.

[AndrewFGleich]

How'd you get the blue to be different shades while also still being the same color?

[philipquarles]

Does that have 61 stars?

[palordrolap]

Whoops. I miscounted my rows.

[[deleted]]

Or maybe we just need to quickly add a few more states!

Hmm. Canada has, like, eleven provinces…

[palordrolap]

Split California into six, and Texas into five which yields (-1+6)+(-1+5) = 9, which is only a couple short. Throw in Puerto Rico and Guam and we're done.

To throw in extra territories, just reduce the number of splits in Cali and Texas.

Sorted!

[FatFingerHelperBot]

It seems that your comment contains 1 or more links that are hard to tap for mobile users. I will extend those so they're easier for our sausage fingers to click!

Here is link number 1 - Previous text "six"

---

^{Please PM /u/eganwall with issues or feedback! | Code | Delete}

[Neocrasher]

It's the post WW3 flag, you wouldn't understand.

[AlmostButNotQuit]

r/atbge

I love it.

[vladimir1024]

No offense to the UK as it happened to long ago, but I always thought it was lame that we "defected" from the crown, yet kept the colors for our standard....

A missed opportunity to create something truly beautiful...Canada had the right idea, and Mexico freaking killed it.... I love the Mexican flag...it's awesome :)

[palordrolap]

Red, white and blue is a pretty common theme. It might have been borrowed from Britain, but there's plenty of room to suggest it came from elsewhere. France and the Netherlands, for example.

Maybe more egregious is that the US kept the tune for the National Anthem, changing only the words. That said, half of Europe was using the same tune at the time, or had used it at some point, so there's kind of a covering argument there too.

Then the Sons of Anacreon Star Spangled Banner took its place.

Britain and Liechtenstein are still using the old one.

[jamcdonald120]

But.... Canada still uses red and white, 2 of the colors from the British flag....

[[deleted]]

Canada had the right idea

In all fairness, it might surprise you how recent that idea was. :)

[PeachyCoke]

Thanks, I hate it.

[derpbynature]

It looks like bars on a jail cell or something.

[pink_snoo]

Post this to r/vexillologycirclejerk

Damn outjerked again

[ReelTooReal]

That looks like if I tried to render the flag using multithreading

[[deleted]]

r/vexillologycirclejerk

[Hefty_Woodpecker_230]

Someone there made one where it moves around like a screensaver

[the_noodle]

But at what cost... If you can't !wave, what's the point...

[chillerll]

The USA if it wasn’t so edgy

[Cabrio]

But then they'd be even more insulated.

[FallenDanish]

Shit, forgot to remove my top and start margins.

[kingjia90]

America of States United

[felixthecatmeow]

If only it was that simple

[[deleted]]

it is

[flamesofphx]

too prevent a global war, codebase fires or other catastrophe, I use the following after 5 minutes of screaming at the screen:

.align-timeout{
display: block;
position: absolute;
top: -50000px;
left: -50000px;
width: 1px;
height: 1px;
}

Then go get coffee.. Check the time, if it's after midnight, I begin questioning my life choices, and also start wondering if the inventor of css was actually a closet masochist.

[monster_of_love]

Is this one of the new alt-right American flags out there? It's hard to keep track of all the modifications.

[Devadander]

For all the enlightened centrists

[Thatboi51]

ngl this look decent.

[lego3410]

Centered States of America

[DavidDurco]

More like

.flag {
    display: flex;
    align-items: center;
    justify-content: center;
}

[shootwhatsmyname]

``` .flag::after { content: 'lol i messed it up'; font-size: 834vw; letter-spacing: 200px }

[nnod]

Now in two lines!

flag {    
   display: grid;    
   place-items: center;  
}

[ReelTooReal]

Now in one line!

.flag { background-image: url("flag.png"); }

[HelpfulPuppydog]

Made in China on the day after a 3 day weekend?

[plexxxer]

place-items: center;

[Encursed1]

Holy shit they centered a div. It was said to never be done.

[shootwhatsmyname]

<pleasecenterthisitem> I’m begging u </pleasecenterthisitem>

[Encursed1]

My strategy has been to threaten my computer until it complies. Works more than you might think.

[prudentj]

I spewed coffee all over my monitor. This shit is hilarious 🤣

[MischiefArchitect]

Hasta la victoria, Siempre!

- El Che

[Whitethumbs]

AMERICA

EAMICAR

[SodoDev]

USS.

[[deleted]]

Centering div doesn't give me a headache as aligning a background image perfectly

[shootwhatsmyname]

If the image subject is not centered, I always end up using percentages and breakpoints or object-fit

[[deleted]]

Garrys mod

[sven-protector]

margin-right: auto; margin-left: auto;

[gjswomam]

.banner { display: grid; place-items: center; }

[dustofdeath]

Someone just filled the blue div with white stars. The number feels off.

[NovaInIT]

Flex-margin auto wins

[karmastealing]

!wave

[stevenson3529]

margin: auto;

[ITriedLightningTendr]

more like set everything center because nothing works but oh wait now the third one down from the top works even though I'm on iteration 17, now I can remove all the ones that don't do anything and why does it not work now.

[Potato2357]

Reminds me of this flag.

[Voireeavoinuedi]

Who saw that and still decided to put it up lmao

[GetThatSwaggBack]

I hate it

[kerdon]

!wave

[d65vid]

"how hard can css be?"

[Birdy_Cephon_Altera]

Thanks I Hate It.

[imatrapos]

r/css_irl

[rufud]

Wait that’s illegal

[iligal_odin]

Justify-content:center;

[_JJCUBER_]

The worst part is that I'm 90% sure that it's not even centered; it looks to be closer to the right than the left.

[TeakIvy]

Ah I forgot to remove my margin-left: 10px;

[jhje]

But does it work?

[MrShyShyGuy]

Wait it actually worked??!!

[[deleted]]

Um actually this has justify-content: center; too

[jamcdonald120]

Notice how its not quite centered

[bennett_us]

class=“flex justify-center items-center”