Vertical center of the pop-up layer based on the CSS covering layer

This article is based on the previous article "CSS Implementation of the covering layer. The vertical center of the pop-up layer is added on the basis of the previous one.

Required: 1. Fixed height of the pop-up layer or height calculated through Js.

Specific implementation: 1. Add a package similar to the covering layer at the pop-up layer; 2. Set the width, which is required. 3. for the pop-up layer, use: margin-left & margin-Right: auto; (horizontally centered); 4. for the pop-up layer, use: Top: 50%; margin-top:-height/2 + 'px'; 5. that's it. No more.

Demo instance:

<! Doctype HTML>