Cassette holding more sub-programs in the vertical and horizontal center of the box parent - child elements known in height, the height of sub-elements unknown

First, a program (width and height are known child element)

1. The child element is turned on absolute positioning, relative positioning of the parent element is turned on

2. The sub-elements disposed left, right, top, bottom properties are 0, margin to auto 

Or (Note that steps 2 and 3 alternative)

3. The left child element is set to 50%, top is set to 50%, margin-left to - child element width / 2px, margin-top set - sub-element height / 2px

 

 

Second, the program bis (unknown subelement width and height)

1. The sub-elements open absolute positioning, the relative positioning of the parent element is turned on (this step is the same and a program)

2. The sub-element left is set to 50%, top to 50%, transform to translate (-50%, - 50%)

 

Special note: child element opens the absolute positioning, along with the parent element should open a non-static positioning (relative or absolute positioning relative to absolute positioning can, on demand), to make absolutely positioned child elements is carried out with respect to its parent element positioning.

end, each program implementation principles are different, hope to be the dialectic.

Guess you like

Origin www.cnblogs.com/chasesunforever/p/12103152.html