Is it possible to vertically align text in a div with `display: -webkit-box;`

Question

I'm working with a div which has the following css attribute assigned to it: display: -webkit-box;.

This div of mine contains text which I'd like to align vertically to the middle. Is this possible without changing the display attribute given to the div?

Additional Info:

I'm using the latest version of Chrome and have tried vertical-align: middle; which failed.

Answer 1

There are two cases of -webkit-box-orient depending on it's value:

1. -webkit-box-orient: vertical: you shoud use -webkit-box-pack: center to vertical align the text.

2. -webkit-box-orient: horizontal: you shoud use -webkit-box-align: center to vertical align the text.

All of these cases are similar to the alignment in flexBox.

Answer 2

The following statement works for me:

-webkit-box-align: center;

https://jsfiddle.net/awt39v5s/1/

For the "old" flexbox definition, https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/ is a good resource.