A language built specifically for expressing layouts

>A language built specifically for expressing layouts
>Centering something vertically & horizontally is virtually impossible
Jesus fucking christ

Attached: 1456058432_css.png (256x256, 5K)

Other urls found in this thread:

codepen.io/user/pen/GbQGMp
flexboxfroggy.com
tailwindcss.com/
medium.com/@slavapestov/yesterdays-news-c52f2be95205
the-echoplex.net/flexyboxes/
twitter.com/NSFWRedditGif

>Inb4 someone posts a 50 line code snippet that centers a div
>"What are you talking about user, its easy"

>margin: 0 auto; text-align: center; on any block element
>virtually impossible

now do vertically

The problem is, that is not vertically centered.

>vertically & horizontally
fucking web devs cant even read

display: flex;
justify-content: center;
align-items: center;

Just tried. Still not vertically centered.
kek just stop

CSS is the second worst thing to happen to web development after JS. It's absolute fucking cancer

vertical-align: middle ? ? ?

That goes on the parent element, you fool.
codepen.io/user/pen/GbQGMp

If you want to learn CSS layouts, I suggest Flexbox froggy: flexboxfroggy.com
Even you should be able to eventually learn how to make the layout you desire.

You're kidding, right? Put the code user offered on the parent, not the child. If it still doesn't work then you might have some code left over from previous failed attempts

Honestly, if you can't figure out something as simple as css what are you doing on Jow Forums?

I fucking hate that shit. Full of unintended behaviours, specially on different browsers/platforms. It's almost done so you are forced to use a shitty framework that writes hundreds of lines for every single detail to work across modern browsers and not work on old machines.

I still don't get why html and css are separated.
They should make html 6 a real language to fuck js.

IE user here. Doesn't work on my masheen

U S E
C S S
G R I D
F O R
E V E R Y T H I N G
M Y
N I G G A

Well okay with new features like flexbox, that specific task may have gotten easier than it used to, but the reality is that css is still a shit language in every other aspect. There's a reason why 99% of the web uses css frameworks, and the 1% that doesn't relies on hacks & tricks to get things to work.

also
>Honestly, if you can't figure out something as simple as css what are you doing on Jow Forums?
>you fool
oh stfu lmao, it would take me a week to learn css. Meanwhile i'd like to see how long it would take you guys to learn c++ and write a game engine or cross platform system abstractions library like me.

They planned to make it so you could separate markup from styling.
They failed, though - to really change the layout and styling, you usually need to also add or reposition HTML elements in the DOM. Now with display: grid and subgrid display: contents we may finally be somewhat close to being able to actually achieve this separation.
Leave a task to the W3C and you are left alone.

You shouldn't have responded. Your response makes you sound even more butthurt than before.
Just learn CSS before complaining about it. It's not like I'm not also sometimes confused by why an elements ends up somewhere I didn't expect, but for the most part, especially thanks to flexbox and grid, it's more than fine.
Also, if you want to use a framework, use tailwindcss.com/ . It's the most customizable and the best to use due to everything being a utility class where you don't have premade components that are a bitch to override (like in bootstrap).
Just be sure to use purgecss with it so you won't end up with 400KB of CSS.

Thanks man. I need to make a website, and css is a real nightmare.

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

brainlet get off my site

You will have to learn CSS proper before using tailwind css, though. And you may want to look at some frameworks for some ideas on how to implement common UI elements (navbars, buttons, cards, sidebars, whatever you want).

>tfw just spamming different displays and float until it looks right

>2019
>float

Just don't. If someone still uses IE9, they deserve whatever broken layout they get.

couldn't give a fuck less about any browser that's not firefox and chromium. If it looks and behaves fine on those, it's getting shipped

Inserting or removing shit until it works describes 90% of my CSS experience. My skills are absolutely abysmal. They barely taught us anything about it in school and from there it was my own fault for never just sitting down and grinding it out.

Imagine if the web was using PostScript instead of HTML, CSS, and JavaScript. Tim Berners-Lee literally used an operating system with a PostScript-based graphics stack while developing the first WWW browser, if only he thought about extending this stack to other machines on the Internet.

Attached: page307_1.jpg (466x569, 110K)

>not using the grid system

it makes it so much easier to position shit.

An article about another OS that used PostScript for its display graphics: medium.com/@slavapestov/yesterdays-news-c52f2be95205

>NeWS was in many ways a precursor of the web platform we have today, moreso than X11 which succeeded it. The NeWS “server”, which ran on your desktop, was an interpreter for an object-oriented dialect of PostScript. The server handled input events from the keyboard and mouse, and performed graphics rendering, much like a web browser would today. Remote applications, or “clients”, would upload PostScript code to the server. This server-side PostScript code performed the duties of the presentation layer for the remote application.

HTML tables are the fucking best and you can't change my mind.

doesn't work, retard

html, body {
height: 100%;
}

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

.square {
width: 200px;
height: 200px;
background: hsl(201, 100%, 39%);

}


LOL GET THIS SHIT LOL
INSTEAD OF
VERTICAL-ALIGN:50%
HORIZONTAL-ALIGN:50%
YOU GOTTA WRITE A FUCKING PARAGRAPH OF CODE

Grids my dude. They make CSS slightly less fucking shit but I still fucking hate every single second I gotta use that steaming pile of shit.

Should I use CSS Grid in prod already? Has anyone of you done it?

>couldn't give a fuck less about any browser that's not firefox and chromium. If it looks and behaves fine on those, it's getting shipped

This.
Other browsers make up such a small percent of my audience that there is literally no reason to spend time accommodating them.

Attached: 2019-06-30 22.07.45.png (694x258, 23K)

Flex you dumb cunt. Sites like this will make you less retarded:
the-echoplex.net/flexyboxes/

You could also use vh/vw margins.

Don't need 100% height, you can use SASS to condense those rules into one. Putting flex on the body is pretty poor practice also.

Screenshot fail.

Attached: 2019-06-30 22.12.40.png (698x258, 26K)

>HorizontalAlignment="Center" VerticalAlignment="Center"
WPF is just wonderful, meanwhile webdevs need to cope.

> text-align
what if it's not text

I get you guys... think about it
How come there are UI Tools for Operating Systems, Smart watches, Fridge SDK but not CSS?
One would think something like FrontPage exist. Yet it doesn't.
Try to make a flexbox positioned absolute and some rules don't work anymore, like height.

Meant to say you can no longer use % but have to use VH or px.
If I use % on everything except that, I can't... i don't know why. Probably autism

The first rule is just so that HTML and body fill the entire height of the screen. Otherwise you wouldn't see that it was centered, you brainlet.
The next lines are what actually center the children of body in both ways.
The only thing the next lines do is make the square visible so your brainlet eyes can see that it's centered.

display
grid

template-columns or wtvr
1fr 2fr 1fr

same with template-rows


save as css.css
fuck bitches, git money Monica

Attached: 1560808043442.jpg (648x1024, 124K)

people with IE

Attached: 1531373869192.gif (384x400, 246K)

just use tables you faggot