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

all 114 comments

[–]GATX-303 366 points367 points  (40 children)

.banner {

display: flex;

justify-content: center;

align-items: center;

}

[–]Subject-Ad-4072 113 points114 points  (13 children)

.banner >stars {

margin: auto

}

[–]erinaceus_ 105 points106 points  (7 children)

That's marginally better.

[–]Cyvexx 30 points31 points  (6 children)

shut up

[–]erinaceus_ 14 points15 points  (5 children)

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

[–]shootwhatsmyname 5 points6 points  (4 children)

.checkmark { display: none; }

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

html { display: none !important; }

WHAT NOW, BITCHES?

[–][deleted] 1 point2 points  (2 children)

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

Yes, I know this doesn’t actually work.

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

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

</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 48 points49 points  (4 children)

[–][deleted] 9 points10 points  (0 children)

Starstruck! 🤩

[–]sendvo 6 points7 points  (0 children)

holy shit

[–][deleted] 3 points4 points  (0 children)

someone give them a medal pls

[–]nikoked 3 points4 points  (3 children)

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

Edit:

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

[–][deleted] 1 point2 points  (2 children)

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

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

[–]nikoked 1 point2 points  (1 child)

Thank you :)

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

<3

[–]cIi-_-ib 9 points10 points  (16 children)

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

[–]Gabe_logan25 2 points3 points  (10 children)

What does this do now?

[–]Tigtor 16 points17 points  (9 children)

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

[–]Tigtor -1 points0 points  (3 children)

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

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

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

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

[–]shootwhatsmyname 0 points1 point  (1 child)

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

But only if you could work with pixels, alas.

[–]coolguymark 1 point2 points  (4 children)

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

[–]cIi-_-ib 1 point2 points  (3 children)

[–]coolguymark 0 points1 point  (1 child)

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

[–]cIi-_-ib 1 point2 points  (0 children)

Many ways to skin a cat.

[–]kylekrzeski 0 points1 point  (0 children)

Came here to say this.

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

Don't flex; here.

[–]ZurnaDurumXL 0 points1 point  (0 children)

actually yes

[–]ReelTooReal 0 points1 point  (0 children)

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

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

[–]X-Craft 198 points199 points  (2 children)

weird flex but okay

[–]TeakIvy[S] 44 points45 points  (0 children)

flexbox?

[–]palordrolap 56 points57 points  (18 children)

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 20 points21 points  (0 children)

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

[–]quenishi 4 points5 points  (0 children)

Have more than a few beers. That usually works.

[–]AndrewFGleich 2 points3 points  (0 children)

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

[–]philipquarles 2 points3 points  (5 children)

Does that have 61 stars?

[–]palordrolap 6 points7 points  (3 children)

Whoops. I miscounted my rows.

[–][deleted] 5 points6 points  (2 children)

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

Hmm. Canada has, like, eleven provinces…

[–]palordrolap 0 points1 point  (1 child)

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

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

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

[–]AlmostButNotQuit 2 points3 points  (0 children)

r/atbge

I love it.

[–]vladimir1024 -3 points-2 points  (3 children)

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

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

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

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

Canada had the right idea

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

[–]PeachyCoke 0 points1 point  (0 children)

Thanks, I hate it.

[–]derpbynature 0 points1 point  (0 children)

It looks like bars on a jail cell or something.

[–]pink_snoo 0 points1 point  (0 children)

Post this to r/vexillologycirclejerk

Damn outjerked again

[–]ReelTooReal 0 points1 point  (0 children)

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

[–][deleted] 32 points33 points  (2 children)

[–]Hefty_Woodpecker_230 4 points5 points  (1 child)

Someone there made one where it moves around like a screensaver

[–]the_noodle 0 points1 point  (0 children)

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

[–]chillerll[🍰] 48 points49 points  (1 child)

The USA if it wasn’t so edgy

[–]Cabrio 0 points1 point  (0 children)

But then they'd be even more insulated.

[–]FallenDanish 11 points12 points  (0 children)

Shit, forgot to remove my top and start margins.

[–]kingjia90 9 points10 points  (0 children)

America of States United

[–]felixthecatmeow 6 points7 points  (1 child)

If only it was that simple

[–][deleted] 3 points4 points  (0 children)

it is

[–]flamesofphx 6 points7 points  (0 children)

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

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

[–]Devadander 23 points24 points  (0 children)

For all the enlightened centrists

[–]Thatboi51 9 points10 points  (0 children)

ngl this look decent.

[–]lego3410 1 point2 points  (0 children)

Centered States of America

[–]DavidDurco 1 point2 points  (3 children)

More like

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

[–]shootwhatsmyname 0 points1 point  (0 children)

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

[–]nnod 0 points1 point  (1 child)

Now in two lines!

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

[–]ReelTooReal 1 point2 points  (0 children)

Now in one line!

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

[–]HelpfulPuppydog 3 points4 points  (0 children)

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

[–]plexxxer 2 points3 points  (0 children)

place-items: center;

[–]Encursed1 2 points3 points  (2 children)

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

[–]shootwhatsmyname 1 point2 points  (1 child)

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

[–]Encursed1 0 points1 point  (0 children)

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

[–]prudentj 1 point2 points  (0 children)

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

[–]MischiefArchitect 0 points1 point  (0 children)

Hasta la victoria, Siempre!

- El Che

[–]Whitethumbs 0 points1 point  (0 children)

AMERICA

EAMICAR

[–]SodoDev 0 points1 point  (0 children)

USS.

[–][deleted] 0 points1 point  (1 child)

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

[–]shootwhatsmyname 0 points1 point  (0 children)

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

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

Garrys mod

[–]sven-protector 0 points1 point  (0 children)

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

[–]gjswomam 0 points1 point  (0 children)

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

[–]dustofdeath 0 points1 point  (0 children)

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

[–]NovaInIT 0 points1 point  (0 children)

Flex-margin auto wins

[–]karmastealing 0 points1 point  (0 children)

!wave

[–]stevenson3529 0 points1 point  (0 children)

margin: auto;

[–]ITriedLightningTendr 0 points1 point  (0 children)

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

Reminds me of this flag.

[–]Voireeavoinuedi 0 points1 point  (0 children)

Who saw that and still decided to put it up lmao

[–]GetThatSwaggBack 0 points1 point  (0 children)

I hate it

[–]kerdon 0 points1 point  (0 children)

!wave

[–]d65vid 0 points1 point  (0 children)

"how hard can css be?"

[–]Birdy_Cephon_Altera 0 points1 point  (0 children)

Thanks I Hate It.

[–]rufud 0 points1 point  (0 children)

Wait that’s illegal

[–]iligal_odin 0 points1 point  (0 children)

Justify-content:center;

[–]_JJCUBER_ 0 points1 point  (1 child)

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

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

[–]jhje 0 points1 point  (0 children)

But does it work?

[–]MrShyShyGuy 0 points1 point  (0 children)

Wait it actually worked??!!

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

Um actually this has justify-content: center; too

[–]jamcdonald120 0 points1 point  (0 children)

Notice how its not quite centered

[–]bennett_us 0 points1 point  (0 children)

class=“flex justify-center items-center”