Our ‘ruler’ should have a 100% height, so it’s like we were aligning to the container’s. We use an inline-block display for both of our elements, so we can align them nicely.

This will be a ruler which we can align our. We need to add another one as a reference. The reason being, since it is the only child, there’s nobody to align to.

container, but it still doesn’t seem to be doing anything. As we already know, it should be applied to. That doesn’t mean we cannot use vertical-align, we just need to be a bit creative.

This is a very common issue in HTML: It is designed around flowing text, not UI, so it feels unnatural to do things with it which should be obvious in a UI development framework. It doesn’t set the alignment of the children of the element, like text-align, but aligns the children themselves, relative to each other. The reason is that vertical-align is for text formatting. It seems to be the obvious solution - but it just doesn’t work. It’s called vertical-align: middle, the first disappointment in every web developers life. We do have something though that looks like exactly what we need. And it’s counter-intuitive as well: negative margins just don’t make sense. This is not always the case: you might want to have a dialog which grows with the content. However, this only works if you know the height of the element beforehand. Usually, the solution is the following: use absolute positioning, top: 50%, and use negative margins to set the size of the element. There are urban legends about people, who once aligned a box vertically in the middle of the screen, but they have never been seen again. It’s the most ridiculously complicated thing in CSS. If you’re unlucky enough to have to support non-flexbox-capable browsers, I’m pretty sure you had nightmares about vertical alignment. This post was originally published on my blog.

Css display flex vertical align