1, the text is centered horizontally
line-height, text-align: center ( Text)
element centered horizontally margin: 0 auo
Scheme 1: position element width known
parent element is set to: position: relative;
child element set to:
position: Absolute; left: 50%; Top: 50%; margin: -50px 0 0 -50px;
from 50% It is around 50%, minus the distance of the width of the element itself
Scheme 2: position transform element unknown width
margin: -50px 0 0 -50px; Replace: transform: translate (-50%, - 50%);
Scheme 3: flex layout
parent element plus:
the display: Flex; // Flex layout
justify-content: center; // make sub centered horizontally
align-items: center; // make sub vertically centered