How was vertical centering typically accomplished using CSS prior to the introduction of Flexbox?

Answer 1

The way vertical centering was and can still be done with flexbox is by setting the padding top and bot of the containing box to force the content to vertically center.

The following css will force the content of the container element to center vertically:

.box {

width: 200px;

border: solid 1px red;

text-align: center;

padding: 5% 0 5% 0;

}

See it in action:

https://jsfiddle.net/jphilapy/xu1mpos4/1/