Introduce the centering methods of the three main elements inline, inline-block, and block. There are few examples, and the main method is explained.
Center horizontally:
block: set margin: 0 auto
inline and inline-block: set text-align: center on its parent element
Common method: (1) Set display:flex; justify-content:cneter; on its parent element
(2) Settings. The parent element sets postion: relative;
Child element settings postion:absolute;
top:50%;
margin-top:-height/2
Center vertically:
inline，inline-block，block：
1. Make line-height=height but can only center the text, that is to say, the text will overflow the container except inline, as follows
2. Set the height of the parent element to be the same as the height of the child element, and then set the upper and lower padding of the parent element to be the same to achieve centering
3. General method: (1) Set display: flex; align-items: center on its parent element
(2) Settings. The parent element sets postion: relative;
Child element settings postion:absolute;
top:50%;
margin-top:-height/2
The above are all from personal research. Please correct me if I am not sure. Regarding the specific content of the display:flex flexible box and various layout methods, the online god has summarized it very well. Here is a recommendation http://www.ruanyifeng.com/ blog/2015/07/flex-examples.html