Front-end technology community general directory (please check this blog before subscribing)
Example effect
introduce
(1) The parent element sets position:relative;
the child element sets: position:absolute;left:50%;top:50%;transform: translate(-50%,-50%); good
compatibility
(1) Setting the flexible box on the parent element: display:flex;justify-content:center; align-items:center
IE11 does not support
(2) Setting the grid element on the parent element: display:grid;justify-content:center; align-items: center
IE10 does not support
(4) parent element setting table element: display: table-cell; text-align: center; vertical-align: middle
child element setting: display: inline-block;
better compatibility