Several methods centered elements:
① block-level elements margin: 0 auto;
For nesting box element, the child element in the parent element is centered, is valid only in the horizontal direction, the floating layout stream is not available
② inline elements text-align: center;
Setting this property to block-level elements, such inline elements centered within the box, generally comprises a text / images, etc.
③ 背景background-position:center top;
The main achievement of the background image is centered
④ the vertical center line of text
Vertical center line of text: the text line height line-height highly consistent with the values of the box
Vertically centered multiline text: text margin settings within padding: (height- row height * number of rows ) / 2; Box-Sizing: border-Box;
⑤ Absolute positioning the middle level: absolute positioning elements left: 50%; then set absolute positioning of elements margin-left: - half the width of the element
But in business development, we recommend the following ways to make the middle element: ( do not need to know the width of the element )
Center Horizontally: left: 50%; Transform: the translateX (-50%);
Vertical center: Top: 50%; Transform: translateY, (-50%);
⑥ When a picture element size is larger than the parent element
text-align: center and margin: 0 auto; does not make the image center may be: set the image properties margin: 0 -100%; and the parent element arranged text-align: center;
⑦ elastic layout
Spindle Alignment: The justify-Content : Flex-Start / End-Flex / Center / Space-BETWEEN / Space-around ;
Its side shaft manner: align = left-items : Flex-Start / End-Flex / Center / Baseline / Stretch ( telescopic item can not set the height, or tensile failure )