What is the method to center a div vertically?

edit

There are multiple methods to center a div vertically. Some of them are:

1. Flexbox method:

.container { display: flex; align-items: center; justify-content: center; }

1. Grid method:

.container { display: grid; place-items: center; }

1. CSS transform method:

.container { position: relative; }

.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

1. Table method:

.container { display: table; }

.child { display: table-cell; vertical-align: middle; }

1. CSS calc method:

.container { height: 100vh; }

.child { height: 50%; margin-top: calc(50% - (height of child element / 2)); }