CSS before Flexbox

@thmnmlst that one vertically aligns only text (probably inline-block as well), used with line-height.

@thmnmlst The vertical-align property only applies to inline-level and 'table-cell' elements

@gijsgoudzwaard well that's a lot more specific!

@thmnmlst Just set it to position: absolute; with a top of 50%. Then you can move it to the center either by margin-top: -half of the height of your container or by using CSS transform with translateY(-50%). You can also use the trick to center horizontally.

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

https://css-tricks.com/centering-cs...

This covers all scenarios.

@lukegv Woops. I missed that part. Only read the xkcd comic.

I like to add more div layers.

Put a div with display table in, then inside a div with display table-cell vertical-align middle.

Make sure they have the right heights and widths too.

Voila.

I really don't get why you can specify the easing function for your animations but you can't do align: center and vertical-align: center.

I can't do css.

😺Can you build a machine learning system to make suggestions purchases to our customers

😎sure, no problem.

😸and can you make the font in the head red?

😥woooh there! slow down. Let's not go crazzy with delusions of grandeur. What kind of wizzard do you take me for. You don't just change the color of of things.

So bad this isn't the original :(

@thmnmlst this is because the browser window has no fixed height defined. And that means you can not define the center of something that's infinite.

So infinite/2 is equivalent to unknown.
This means that you need to create a situation where your height is defined and then you can calculate half.

My solution is mostly using magic of margins and paddings with %. And hope for the best that all browsers like the solution.