Block element horizontally centered: effect:
The HTML structure is as follows :(the child element is centered in the parent container)
margin:auto
Flex layout
Horizontal center alignment for absolute positioning of child elements 1: (the nearest parent container must be positioned using containing blocks,position: relative/fixed/absolute) left + margin-left negative value
Position: relative/fixed/absolute) transform: Position: relative/fixed/absolute TranslateX (-50%) or translateX(-50%* child width px)
Block element vertically centered: The HTML structure is the same as that of horizontally centered.
Top + margin-top negative value (position:absolute)
Top + transform:translateY(-50%)/translateY(-50%* child height)
Flex layout: default main axis is X-axis, align-items: center
Horizontal and vertical center of block elements: effect:
Flex layout
Position: Absolute Achieve horizontal and vertical center 1: top: 50%; left: 50%; transform: translate(-50%, -50%);
Position: Absolute Implement horizontal and vertical center 2:
Text-align: center effect:
Inline child element is vertically centered: line-height: parent element height
