CSS Common centering method

In the CSS layout, the center occupies a very important role, if not good use of the center, it will cause the entire page confusion.

In the actual page layout, there are many ways to center, there are many simple and practical methods, there are honest methods. Just started to write the page, I prefer to use the honest way to write, because it is not wrong, but we should also grasp the common center method.

Common Centering Method: Text-align:center

Centers inline text, or inline elements, horizontally in the parent container.

Vertical-ailgn:middle

Vertical centering of inline text, inline elements, with Display:table,display:table-cell, works wonders.

Line-height

Aligns the text vertically with the height.

Margin:auto

Teamed with width to center horizontally.

Hacks,hacks (Little Tricks)

There are many hacks, negative margin, shadow elements: Before and so on, if your content is not very fixed flower, most of them are very fragile.

Translate ( -50%,-50%)

Using position plus translate translate ( -50%,-50%) is more peculiar, the percentage calculation is not based on the parent element, but on its own basis.

Absolute Positioning Center

Note: Height must be defined and Overflow:auto is recommended to prevent content overflow.

Center Viewport

Content elements: positioon:fixed, z-index:999, remembering the parent container element position:relative.

Negative margin

Know exactly how wide the height is, and the negative margin is half the width and height.

CSS Common centering method