实现元素水平垂直居中

1. 如果是文本元素和图片
   水平居中 ：父元素text-align:center;
   垂直居中：父元素设置line-height：等于父元素的高度。
2. 定宽高块级元素水平垂直居中 [abosolute+负margin]
   通过postition:absolute进行绝对定位，然后设置top：50%；left：50%；margin-left宽的一半和margin-top：高的一半。
3. 定宽高子元素居中：top: 0; left: 0; right: 0； bottom: 0； margin: auto;（子元素的宽高是固定的，如果没有给子元素宽高，子元素将铺满整个父元素[absolute+margin auto]
4. 定宽高子元素居中: position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); [absolute + calc]
5. 不定宽高子元素居中:position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); [absolute + transform]
6. 父元素通过flex实现不定宽高子元素居中：display:flex;justify-content:center;align-items:center;(对父元素设置)