The center horizontal element
1) horizontal inline elements centrally: text-align
level 2) centrally block-level elements: margin: 0 auto
Vertical center element
1) inline elements: line-height setting as to the height of the parent element of large
2) block-level elements: relatively positioning a parent use, the child using absolute positioning and margin: auto ;, the top, left, right, bottom 0
3) to the parent and child are added absolute positioning, give child Add top: calc (50% - child element half the height)
left: Calc (50% - child element width half)
4) to the parent positioned opposite, children absolute positioning: left: 50%; Top: 50%;
margin-left: - child element width half; margin-top: - child element height half
5) to the parent a display: flex; align-items: center; give child added: margin: 0 auto;