Positioning Center Display

One: preheating review

Each element in the 1.CSS has a positional property, which defaults to static!

2. Reference coordinate system unit (percent, PX)

Absolute: If the ancestor tag does not have a referential trait (position:relative, absolute), it is positioned in the browser window border .

Out of document Flow

Relative: Offset from the original position as a reference.

Without leaving the document flow, the previous position still occupies Oh! When you set the height, the height of the parent element is stretched.

Relative positioning overrides the document flow. There is also coverage between relative positioning elements Oh!

The relative unit Top property is not valid with percentages?    Well, then use px!.         Left, right property does not have this problem Oh!   Why?

A : Because percentages are relative units, it is determined by referring to the value of the parent element, because the default height of body in the browser is not the viewable area height of the browser. However, the default width of the body is the viewable area width of the browser. Therefore, the body height is 0px,20% is also 0.

so use relative units when you must see the parent element has no height Oh!     Not the default height Oh! The relative units are the height inherited from the parent element Oh!

3.top, left equivalent is can take negative value Oh!

Scenario One: Positioning implementation

Scenario Two: JS implementation

Idea: You can do this, when loading the page to execute a JS method; Set the left spacing of the div to the current width of the browser minus half the width of the Div,

Up and down: Set the upper spacing to the current height of the browser minus half of the div height;

Positioning Center Display