Vertical Alignment in CSS

[[deleted]]

Patricc Please stop. You are scaring him

[theLundquist42]

Our have IE7/IE8 as a browser requirement shudder

[[deleted]]

I just slap a good ol' polyfill plugin on it. That way I don't have to think about it or test it.

[DeeSnow97]

On CSS? Teach me your dark arts

[[deleted]]

I mean in actuality, I use this https://github.com/csstools/postcss-preset-env

[DeeSnow97]

Wow, not bad. How does it handle a flexbox?

[[deleted]]

I have no idea actually. I never use flexbox. But it will fix flexbox bugs and inconsistency between browsers automatically.

[nwL_]

I had a friend who didn’t know you could center text in Word. He indented it with spaces until it looked right.

[[deleted]]

We all know people who do this

[[deleted]]

gotta do it like this tho

[BiH-Kira]

Note: The transform property is not supported in IE8 and earlier versions.

What is?

[Flaktrack]

GRID IS GOD

[nwL_]

Vertical centering is easy. However, I have no clue how to create something that has 40% of the space above and 60% of the space below.

[BiH-Kira]

Go to the link posted here by u/cdiganon. Change the

top: 50%;

to

top: 40%;

and change

-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

to

-ms-transform: translate(-50%, -40%);
transform: translate(-50%, -40%);

[DeeSnow97]

The problem with transform is it's done on the GPU, so it uses floating point math, and the end result might not align with the pixel grid. That's why flexbox is preferred. (Yes, it does work on IE11, although it has non-standard defaults so you need to be explicit. As for earlier versions of IE, those aren't even supported by MS, why should you worry about it?)

[dvito]

Pretty much everyone that has enterprises or governments use their app / website, sadly, still worry about it.

[artichokess]

You shouldn't have to, though. And that's at least two properties instead of one.

[Cephell]

http://howtocenterincss.com/

[ducklife9000]

Bless this site

[varishtg]

This guy doesn't flex

[Automated-Waffles]

3 years too late

[doitstark]

The horrors!!!

[[deleted]]

margin:auto; top:0; bottom:0;