day 210 — code 365

Mon 11 Jul 2016

CSS

Spent a bit of time trying to vertically centre elements… again.

I found that this worked:

Parent: use line-height

Child: will be vertically centered!

And this other trick:

.element {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

From here: https://codepen.io/sebastianekstrom/pen/kzEhe/

I’ve been trying to compose elements that will work well as self-contained units, to be used as React components.

Also been investigating how best to / whether it would be beneficial to implement a grid system… and whether Flexbox would be useful.

I found 2 very helpful guides:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://philipwalton.github.io/solved-by-flexbox/