Vertical + horizontal centering is an old-fashioned problem, and now we will discuss the two cases of fixed height and non-fixed height
1. Parent box fixed height [positioning]
Implementation 1:
father-box: position:relative
child-box：position:absolute+left:50%+top:50%+translate(-50%,-50%)
Implementation 2:
father-box：position:relative
child-box： position:absolute+top:0+right:0+bottom:0+left:0+margin:auto
2. The parent box does not have a fixed height [flex box]
Implementation 1 :
father-box:display:table
child-box:display:table-cell+vertical-align:middle+text-align:center
Implementation 2:
father-box:display:flex+align-items:center+justify-content:center
child-box:flex:1