Centering method of indefinite wide element

For fixed-width elements, the general use of margin:0 Auto can be very well implemented,

A bad way to achieve:

1, Text-align, line-height more common, but for the text is a single row of text, for containers, boxes, can not be achieved.

2, Position:absolute, 50% and margin:-px idea is the container out of the document, by negative margin drag itself half, to achieve the center. If the parent element width determines that the scheme is feasible, the margin value cannot be determined if its own width is indeterminate. Not very suitable,

3, position:fixed, 0 and Margin:auto relative to the window positioning, often used for modal box implementation. However, using margin requires that the element itself has a wide height to achieve its own center effect;

4, Position:absolute, 0, and Margin:auto also require that the parent element have width and height. does not meet

Easy-to-implement approach:

Scenario One: Parent element Display:tabel, child element Vertical-align:middle;display:table-cell

Scenario Two: Sub-element positioning attributes out of the document flow, absolute, the parent element is non-static positioning, the child element by using the Translate attribute negative percentage, pull itself back halfway to reach the center.

Position:absolute;  top:50%;  left:50%;  Transform:translate (-50%,-50%);
Scenario Three: The VW VH and translate are relative to the viewport height (viewport width), and the viewport height (viewport height) of 1% 50VW represents 50% of the current viewport width. So you can set the fix location, and then offset the property to write in relative units, tranlate half the shift center
Scenario four:: Before and Display:inline-block. Principle, the center element adds a pseudo-class, and the content is empty, the height is 100%, the expression is inline-block, so you can set the vertical-align to remain vertically centered, for the center element itself, the use of inline-block and increase
Elements maintain a horizontal baseline, which is aligned with the vertical-align at the same time relative to middle. Because the element itself is displayed as a row, you can use the Text-align to center it horizontally.
Scenario Five: Flex, the perfect layout for compatibility, easy to use. parent element Display:flex; Child elements, align-items:center vertically centered, justify-content:center, spindle and side axes are all centered, Flex is powerful.
Remarks, content reference Tang Yu the Great God's blog https://www.tangshuang.net/3197.html

Centering method of indefinite wide element