CSS implementation Div is centered horizontally and vertically up and down

<! DOCTYPE html>Introduction to horizontal vertical centering principle
The absolute positioning Position:absolute is used here, with left and top to set the object distance to 50%, but if you set 50%, the box is not actually centered, so you set the Margin-left:-200px;margin-top: -100px, here's the trick: the Margin-left value is half the width, the value of Margin-top is also half the height of the object, and is set to negative, thus achieving horizontal and vertical centering.