The problem of locating and centering embedded boxes does not affect the layout of the box when the browser is scaled.

The problem of locating and centering embedded boxes does not affect the layout of the box when the browser is scaled.

Problem description: at first glance, we may think of floating layout, but when debugging and Scaling with a browser, the "Hello China" box will naturally become a column. So how can we make them adaptive so that they are always in the middle of the browser?

 

<! DOCTYPE html> 
This case applies to knowledge points: relative and absolute positioning; center of the box
The following is a summary of the center problem:
1. Center on the left and right:
Locate the box absolute, parent box relative, left = 50%; move the box, Margin-left:-Its width is half.
2. Vertical center:
Locate the absolute box, parent box relative, top = 50%; move the box, Margin-top:-Its height is half.