You'll Never Center A Div This Fast

  Рет қаралды 145,292

Hyperplexed

Hyperplexed

2 жыл бұрын

#shorts #css #jokes
Support the channel: ko-fi.com/hyperplexed (accepts PayPal, card, etc).
A brief history of centering a div. And a potential new way too?

Пікірлер: 57
@DennisUlijn
@DennisUlijn Жыл бұрын
Where’s my margin: 0 auto; ?!
@benjaminschneider
@benjaminschneider Жыл бұрын
It’s only horizontal not both.
@thethiny
@thethiny Жыл бұрын
​@@benjaminschneider still should've been discussed
@cristianjuarez1086
@cristianjuarez1086 Жыл бұрын
Needs flex
@MubashirAR
@MubashirAR Жыл бұрын
2034: everything is automatically centered
@chen-shen-yi
@chen-shen-yi 10 ай бұрын
3202: our monitor is an infinity space, so everything is the center.
@notmanciv5016
@notmanciv5016 Жыл бұрын
People who use
@Snortingcocaineofficial
@Snortingcocaineofficial Жыл бұрын
I use that lmao
@Magnogen
@Magnogen Жыл бұрын
It'd be great if css took a leaf out of the Android LinearLayout properties and added a "gravity: center center" line.
@IsaakWolf
@IsaakWolf Жыл бұрын
This mans making front end coding looking fun
@tabishnaqvi5748
@tabishnaqvi5748 Жыл бұрын
It is?
@LambdaCreates
@LambdaCreates Жыл бұрын
2039: display:grid;place-items:center; That's the solution.
@pavelbrixi7773
@pavelbrixi7773 Жыл бұрын
@orbe5533
@orbe5533 Жыл бұрын
Ahaha not enough, that be like my Digital solutions teacher
@neo-lj5nt
@neo-lj5nt Жыл бұрын
Where is the zero lines of code div?
@cmdpromp
@cmdpromp Жыл бұрын
It's may 25 2023. Official year anniversary of this video
@Dev-Siri
@Dev-Siri Жыл бұрын
Well, I already have a 1 line solution that can work with any layout: div { /* Grid Way */ display:grid;place-items:center; /* Flex Way */ display:flex;align-items:center;justify-content:center; /* Transform Way */ /* I don't know the transform way */ }
@saidalachgar8837
@saidalachgar8837 Жыл бұрын
3 lines 🙂 Left 50% top 50% transform translate(-50%,-50%)
@Mukeshsainaidu
@Mukeshsainaidu Жыл бұрын
​@@saidalachgar8837 where do you learn css? I want to start Java script suggest me some best way
@saidalachgar8837
@saidalachgar8837 Жыл бұрын
@@Mukeshsainaidu KZfaq tutorials with real time practice
@ryan_765
@ryan_765 Жыл бұрын
That's literally the exact same as the video though, just put on one line
@daometh
@daometh Жыл бұрын
XD if only.
@stysan
@stysan Жыл бұрын
October 10th is my birthday. This would be the greatest gift.
@lordgiacomos2551
@lordgiacomos2551 Жыл бұрын
And yet, sometimes I still mourn the removal of the center tag in html...
@MineCrafterCity
@MineCrafterCity Жыл бұрын
10 years later and I still don't use flex
@Raevolpe
@Raevolpe Жыл бұрын
Update yourself then
@loismorellos4750
@loismorellos4750 Жыл бұрын
I even remember when we used a hack that takes advantage of display: table;. they were painful ol-days
@relaxingandy366
@relaxingandy366 Жыл бұрын
😂😂😂 Great 👍
@edgeofhalo
@edgeofhalo Жыл бұрын
Know nothing of code. Love design. Vids are quite exemplary. Perhaps a short on your methods when using color, favorite scheme or fundemental of UI design.
@bijanmondal4639
@bijanmondal4639 Жыл бұрын
Want more videos ❤️
@heesroy
@heesroy Жыл бұрын
savioooor
@happylilgoat6692
@happylilgoat6692 Жыл бұрын
People who use tailwind css:
@kabeeki
@kabeeki 2 жыл бұрын
Lmaoo, funny vid
@kwanele_dev
@kwanele_dev Жыл бұрын
2050: .div{ put: c; }
@a.anvarbekov
@a.anvarbekov Жыл бұрын
Lol, I actually tried this but no property like this exists
@sergiosanchez8349
@sergiosanchez8349 Жыл бұрын
You miss display block margin auto
@ArduinoTurkBatu
@ArduinoTurkBatu Жыл бұрын
or just "margin: auto;"
@mrhelpless
@mrhelpless Жыл бұрын
I'm 2008
@ikazuchi-san5772
@ikazuchi-san5772 Жыл бұрын
... Please dont do what I did, issajoke
@stysan
@stysan Жыл бұрын
me 5 years ago
@Vichion
@Vichion Жыл бұрын
So I am not supposed create... @media only screen and (max-width: *) {} @media only screen and (max-height: *) {} ...for every pixel size and calculate... (body width - div width) / 2 (body height - div height) / 2 ....and pass in the result as margin-right, margin-left, margin-top and margin-bottom? 😂🤣
@dracokinerek
@dracokinerek Жыл бұрын
We need a position attribute: .wrapper-6969{ positionX: 50% positionY: 50% }/*this is the positioning*/
@gabrielzfr
@gabrielzfr Жыл бұрын
Margin auto mfs be like
@average-team-kid
@average-team-kid Жыл бұрын
Bruh you really like divs
@1jacques
@1jacques Жыл бұрын
Song?
@thethiny
@thethiny Жыл бұрын
Margin: auto auto
@thatghost281
@thatghost281 Жыл бұрын
wheres margin 0 auto and center element
@andrewwade4545
@andrewwade4545 Жыл бұрын
margin: 0 auto;
@sequelz
@sequelz Жыл бұрын
nope doesnt work
@yep2179
@yep2179 Жыл бұрын
@@sequelz It does
@sequelz
@sequelz Жыл бұрын
@@yep2179then my website doesn't work probably lol
@wlockuz4467
@wlockuz4467 Жыл бұрын
class="flex items-center justify-center" is my all time favourite 😄
@user-uj6lc2ql2p
@user-uj6lc2ql2p Жыл бұрын
Actually, display flex does not work
@nomzz8106
@nomzz8106 Жыл бұрын
text-align: centre; EZ
@andyc9902
@andyc9902 Жыл бұрын
Text aline center
@j.productions6951
@j.productions6951 11 ай бұрын
Can i have your email? Potential buisness opportunity. Couldn’t find it on your account
@0r94n1z3r
@0r94n1z3r Жыл бұрын
now get a load of "min-width: 0;" for a flex to work. Y? Css...
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 910 М.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,7 МЛН
Increíble final 😱
00:37
Juan De Dios Pantoja 2
Рет қаралды 96 МЛН
Homemade Professional Spy Trick To Unlock A Phone 🔍
00:55
Crafty Champions
Рет қаралды 53 МЛН
1 класс vs 11 класс  (игрушка)
00:30
БЕРТ
Рет қаралды 4,2 МЛН
How to OVER Engineer a Website // What is a Tech Stack?
11:20
Fireship
Рет қаралды 2,3 МЛН
This Website Theme Hasn't Been Perfected Since 1996
9:43
Hyperplexed
Рет қаралды 316 М.
The purest coding style, where bugs are near impossible
10:25
Coderized
Рет қаралды 890 М.
Unravelling the Magic behind Polyrhythms
17:49
Hyperplexed
Рет қаралды 209 М.
CSS Tips And Tricks I Wish I Knew Before
12:12
Lama Dev
Рет қаралды 434 М.
I Gave a Website Logo Superpowers
5:47
Hyperplexed
Рет қаралды 243 М.
7 ways to deal with CSS
6:23
Fireship
Рет қаралды 1,1 МЛН
Top 10 Advanced CSS Responsive Design Concepts You Should Know
20:16
Web Dev Simplified
Рет қаралды 501 М.
Learn CSS Positioning Quickly With A Real World Example
8:32
Slaying The Dragon
Рет қаралды 592 М.
These Pesky Web Designers Have Done It Again...
5:24
Hyperplexed
Рет қаралды 351 М.